版权声明：版权所有，未经许可，禁止转载！ https://blog.csdn.net/weixin_43031412/article/details/91412760
mixin是可以重用的一组CSS声明。mixin有助于减少重复代码，只需声明一次，就可在文件中引用。
可以看出，mixin类似变量，不同的是变量存储值，mixin存储一组css声明。mixin可以传入参数。
要创建一个mixin，可以使用@mixin指令：
@mixin mixin-name() { /* css 声明 */ } 一旦创建了mixin，就可以引用它，使用@include指令后跟mixin的名称：
... @include mixin-name(); ... 举例说明
mixin的一个常见用法是浏览器厂商前缀。
当浏览器厂商添加新的非标准CSS特性时，通常会标明厂商前缀，表示该特性只在特定浏览器上有效。
例如，-webkit-border-radius在Chrome和Safari浏览器有效，而-mozilla-border-radius在Firefox上有效。
对于这样的特性，通常需要包含所有浏览器的对应特性声明，以便兼容这些浏览器，这里就可以用minxin来实现：
@mixin border-radius() { -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; } aside { border: 1px solid orange; @include border-radius(); } 经过编译会输出以下css内容:
aside { border: 1px solid orange; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; border-radius: 8px; } mixin 参数
可以给mixin传入参数，mixin中的css声明将更加灵活。
示例：
@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } aside { border: 1px solid orange; @include border-radius(7px); } 经过编译会输出以下css内容:
aside { -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; border-radius: 7px; } mixin是sass中一个非常有用的功能。
文章来源: https://blog.csdn.net/weixin_43031412/article/details/91412760