Sass是一种编译成 CSS 的样式表语言,具有完全与 CSS 兼容的语法,有助于保持大型样式表井井有条,并使在项目内部和项目之间共享设计变得容易
使用背景
CSS中的一些东西写起来有点乏味,尤其是CSS3 和存在的许多供应商前缀。一个 mixin 可以让你创建一组你想要在你的站点中重用的 CSS声明,它有助于保持你的 Sass 非常干燥,甚至可以传入值以使您的 mixin 更加灵活。
定义混入
混入通过@mixin类名 后面跟任选的 arguments 参数的方式定义一个 Mixins 模块,然后添加任何你想重复使用的样式
/* 不携带参数 */
@mixin public{
width:50px;
height:50px;
background:red;
}
/* 引用 Mixins模块 */
div{
@include public;
}
编译为CSS
div {
width: 50px;
height: 50px;
background: red;
}
以上便是一个非常简单的混入(Mixin),你完全可以把混入看做一个函数(function)/模块(Mixins),其中@include指令负责调用函数/模块
混入也还可以包含选择器和属性的混合体,选择器中甚至可以包含 parent references(父选择器):
/* 混合体:选择器/嵌套属性/父选择器 */
@mixin public{
&:hover{
font:{
family: '微软雅黑';
size: 14px;
weight: bold;
}
}
*{
border-radius: 10px;
}
}
/* 引用 Mixins模块 */
div{
@include public;
}
编译为CSS:
div:hover {
font-family: '微软雅黑';
font-size: 14px;
font-weight: bold;
}
div * {
border-radius: 10px;
}
解释:在 public 模块中,首先使用了选择器(&)
,接着使用嵌套属性语法,最后使用了父选择器(*)
总结:@mixin 能够包含任何在 CSS 和 Sass 中有效的内容!
包含其它的混入
可以通过以包含多种简单 @mixin 模块的方式创建较为复杂的 @mixin大模块。
/* 模块 1 */
@mixin demo-1{
width:50px;
}
/* 模块 2 */
@mixin demo-2{
height:50px;
}
/* 模块 3 */
@mixin demo-3{
background:rgb(255,0,0)
}
/* 合并模块 => Big */
@mixin Big{
@include demo-1;
@include demo-2;
@include demo-3;
}
/* 调用大模块 => Big */
div{
@include Big;
}
编译为CSS:
div {
width: 50px;
height: 50px;
background: red;
}
注意: 混入也可以包含自己,该行为不同于 Sass 3.3 之前的版本,以前混入递归是被禁止的,只定义后代选择器的混入可以安全地混入到文件的最顶层。
这就像造汽车,当你把每个零件都做出来的时候,拼接过程不会很难。
混入在文档的根
混入(@mixin)
可以包含在任何规则的外(即,在文档的根),前提是它们不直接定义的任何属性或使用任何父选择器引用:
/* 模块 */
@mixin demo{
div{
width:50px;
height:50px;
background:rgb(255,255,0);
}
}
/* 文档根调用 */
@include demo;
拿如上代码来谈,如果没有 div 套着这些属性规则,就中了上面加粗文字【不直接定义的任何属性】这条规则,肯定就会报错,如果你还不理解为什么报错,请看下面。【不能使用任何父选择器】很好理解,不再赘述
【不直接定义的任何属性】Error:
/* 模块 */
@mixin demo{
width:50px;
height:50px;
background:rgb(255,255,0);
}
/* 文档根调用 */
@include demo;
// 报错
携带参数 (Arguments)
当定义一个混入(@mixin)
的时候,参数被作为变量名,写到混入(@mixin)
名字后面的括号内,多个参数可以用逗号分隔,当调用混入的时候,值通过对应的参数顺序被传递。
解释:混入(@mixin)可以用 SassScript 值作为参数,给定的参数被包括在混入(@mixin)中并且作为为变量提供给混入(@mixin)使用。
/* 携带参数 */
@mixin demo($width,$height,$bg){
width:$width;
height:$height;
background:$bg;
}
/* 调用 */
div{
@include demo(50px,50px,rgb(255,0,0));/*传值*/
}
编译为CSS:
div {
width: 50px;
height: 50px;
background: red;
}
这与函数的思想非常相似,且这种方式的样式复用方法非常的强大,具体使用场景想必你脑海中一定浮现了!
同样可以使用普通的变量赋值语法为参数指定默认值,当调用混入时如果没有给参数赋值,则自动会使用默认值代替:
/* 携带参数 */
@mixin demo($width,$height,$bg:rgb(255,0,0)){
width:$width;
height:$height;
background:$bg;
}
/* 调用 */
div{
@include demo(50px,50px);/*省略颜色,使用默认值*/
}
编译为CSS:
div {
width: 50px;
height: 50px;
background: red;
}
background 没有传参,即使用时默认为红色。
需要注意的是,传参顺序不正确会导致报错:
/* 传参顺序不正确会导致报错 */
@mixin demo($width:50px,$height:50px,$bg){
width: $width;
height: $height;
background: $bg;
}
/* 宽高使用默认值 / 颜色传入新值 */
div{
@include demo(rgb(255,255,255));
}
Error:Required argument $bg must come before any optional arguments.,也就是说,参数 $bg 必须在任何可选参数之前。
关键字参数(Keyword Arguments)
混入(@mixin)
在 引入(@include)
的时候也可以使用明确的关键字参数,也就是说,你可以在传递值给mixin时将参数名称和参数值一并传递过去,请看下面这个例子:
/* 明确参数名称/参数值 */
@mixin demo($width,$height,$bg){
width: $width;
height: $height;
background: $bg;
}
/* 调用 */
div{
@include demo($width:20px,$height:20px,$bg:green)
}
可以观察到,这样做不够简明,但是它可以使样式表更容易阅读,它给函数呈现了更加灵活的接口,它使多参数的混入更加容易调用。
Sass允许参数的位置顺序是可变的:
/* 明确参数名称/参数值 */
@mixin demo($width,$height,$bg){
width: $width;
height: $height;
background: $bg;
}
/* 调用 */
div{
@include demo($bg:green,$height:20px,$width:20px)/*顺序反转*/
}
也就是说,命名的参数可以按任何顺序进行传递,有默认值的参数可以省略。
可变参数(Variable Arguments)
有时候,我们不能确定一个 混入(@mixin) 或一个 函数(function) 需要使用多少个参数,对于这种情况,Sass 给出了 “可变参数” ,参数在声明 混入(@mixin) 或 函数(function) 结束的地方,所有剩余的参数打包成一个 列表(list) ,参数看起来就像普通参数一样,但后面跟随着 " … "
简单来说,可变参数可以接收多个未知的数量的参数。
例如,用于创建盒子阴影(box-shadow)的一个混入(mixin)可以采取任何数量的 box-shadow 作为参数:
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
编译为CSS:
.shadows {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
传递内容块到混入(Passing Content Blocks to a Mixin)
样式内容块可以传递到混入(@mixin)
包含样式的位置,样式内容块将出现在混入内的任何 @content
指令的位置,这使得可以定义抽象与关联到选择器和指令的解析:
@mixin demo{
@content;
}
@include demo{
#div{
padding:200px;
}
}
编译为CSS:
#div {
padding: 200px;
}
注意: 当 @content 指令指定多次或在一个循环中指定的时候,样式块将在每次调用中被复制并引用。
变量的作用域和内容块(Variable Scope and Content Blocks)
传递给混入(@mixin)的内容块在其被定义的作用域中进行运算,而不是混入(@mixin)的作用域,这也就意味着混入(@mixin)的局部变量不能传递给样式块使用,并且变量将解析为全局值
$color: rgb(0,0,0);
@mixin colors($color: blue) {/* @include => 不再@mixin作用域中进行运算 */
background-color: $color;
@content;
border-color: $color;
}
.colors {
@include colors { color: $color; }
}
编译为CSS:
.colors {
/* @include => 不再@mixin作用域中进行运算 */
background-color: blue;
color: black;
border-color: blue;
}
可以看到,color 为黑色,证明@include colors
没有在@mixin
中进行运算,否则颜色应该为 blue 才对。