Sass：@function、@mixin、占位符、@extend
在最近的一个项目中，我有机会创建一个自定义框架。在构建框架结构、添加函数、创建 mixin 的过程中，我决定与我的开发伙伴们分享一些信息。
好了……
@function 是返回任意 Sass 数据类型单个值的代码块。
下面的函数是我经常使用的，它接受一个像素尺寸并将其转换为 rem 单位。
@function calculate-rem($size) {
$rem-size: $size / 16px;
@return #{$rem-size}rem;
}
*I could easily just use numbers but
people in the past have had the
habit of using px for all of their font sizes.
@mixin 与函数非常相似，但两者之间的主要区别在于 mixin 输出直接编译成 CSS 样式的 Sass 代码行，而函数返回一个值，该值可以成为 CSS 属性的值，或者成为可以传递给另一个函数或 mixin 的内容。
@mixin font-size($size) {
font-size: calculate-rem($size);
}
mixin is taking $size as an argument to pass into
the calculate-rem function to evaluate into rems
使用 mixin 时，需要像这样使用：@include font-size(16px)，这将编译成font-size: 1rem;
或者，我也可以直接在我的类中使用该函数：
.my-class {
font-size: calculate-rem(16px);
}
占位符选择器与类选择器非常相似，区别在于它不使用句点 (.) 开头，而是使用百分号 (%)。占位符选择器还有一个额外的特性：它们不会显示在生成的 CSS 中，只有继承自它们的选择器才会包含在输出中。
%icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
@extend 注解允许类之间共享一组属性。使用 @extend 注解扩展类的选择器会紧挨着被扩展的类，形成一个以逗号分隔的属性列表。
.foo {
color: black;
border: 1px solid black;
}
.bar {
@extend .foo;
background-color: red;
}
以上内容编译后为：
.foo, .bar {
color: black;
border: 1px solid black;
}
.bar {
background-color: red;
}
占位符应该与 @extend 一起使用，因此通常情况下，如果您知道一组属性将在几个元素中使用，您可以创建一个占位符并扩展这些属性。
%icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.foo {
@extend %icon;
color: black;
border: 1px solid black;
}
.bar {
@extend %icon;
background-color: red;
}
这将编译成：
.foo, .bar {
transition: background-color ease .2s;
margin: 0 .5em;
}
.foo{
color: black;
border: 1px solid black;
}
.bar {
background-color: red;
}
这是对 Sass 这些特性的简要介绍。如果大家有足够多的需求，我会制作第二部分，讲解更高级的 mixin 和逻辑。希望对大家有所帮助，如有任何疑问，欢迎在评论区留言或直接联系我。
-很高兴能帮助你。
文章来源：https://dev.to/keinchy/sass--function-mixin-placeholder-extend-18g6