标签：样式 size 需要 idt hold info fun function 问题
1. mixin
就是定义了一个函数，可以传参，并且设定默认值，css选择器可以通过@include来引用，mixin混入的代码，就是原样复制，不会合并，会造成冗余
例如：
@mixin br6($br6: 6px){ /* 传一个带值的参数 */ border-radius: $br6; } div{ @include br6(); /* 如果不传值就是6px,传值会覆盖原始值 */ }
再如：
@mixin icon { transition: background-color ease .2s; margin: 0 .5em; } .error-icon { @include icon; /*错误图标指定的样式... */ } .info-icon { @include icon; /* 信息图标指定的样式... */ }
会生成：
.error-icon { transition: background-color ease .2s; margin: 0 .5em; /*错误图标指定的样式... */ } .info-icon { transition: background-color ease .2s; margin: 0 .5em; /* 信息图标指定的样式... */ }
其中的.icon的代码是重复的。
2. @extend
是继承一个class，其会复制父class的内容，但是会合并，即父子用逗号隔开，写在一起，无多余的冗余代码
例如：
.icon { transition: background-color ease .2s; margin: 0 .5em; } .error-icon { @extend .icon; /*错误图标指定的样式... */ } .info-icon { @extend .icon; /* 信息图标指定的样式... */ }
会生成：
.icon, .error-icon, .info-icon { transition: background-color ease .2s; margin: 0 .5em; } .error-icon { /*错误图标指定的样式... */ } .info-icon { /* 信息图标指定的样式... */ }
3. %placeholder
相当于一个虚拟的class，是为了解决@extend直接继承class，父class会被生成的问题。
因为一个父class有可能只是用来被继承的，本身不会被使用，生成出来占用空间。占位符可以解决这个问题
例如：
%icon { transition: background-color ease .2s; margin: 0 .5em; } .error-icon { @extend %icon; /*错误图标指定的样式... */ } .info-icon { @extend %icon; /* 信息图标指定的样式... */ }
生成为：
.error-icon, .info-icon { transition: background-color ease .2s; margin: 0 .5em; } .error-icon { /*错误图标指定的样式... */ } .info-icon { /* 信息图标指定的样式... */ }
没有生成被继承的.icon这个class。%placeholder和@extend是配合使用的，没有替代之说。
%placeholder在@media中使用需要注意，不能在@media中直接写extend。
例如下面的会报错：
%icon { transition: background-color ease .2s; margin: 0 .5em; } @media screen { .error-icon { @extend %icon; } .info-icon { @extend %icon; } }
正确的是(只将placeholder写在@media中，extend写在@media外面)：
@media screen { %icon { transition: background-color ease .2s; margin: 0 .5em; } } .error-icon { @extend %icon; } .info-icon { @extend %icon; }
4. 自定义函数
@function可以自定义函数，可以在css选择器中直接引用，和mixin十分类似
例如:
@function double($n) { @return $n * 2; } #sidebar { width: double(5px); }
参考：https://blog.csdn.net/kaosini/article/details/40615123
sass的mixin,extend,placeholder,function
标签：样式 size 需要 idt hold info fun function 问题
原文地址：https://www.cnblogs.com/mengff/p/9566281.html
