sass的混合器是对大段的样式代码进行命名,定义为混合器,以便被多次引用。
混合器的格式为:“@mixin 样式名称{样式代码}”;
调用混合器的格式为:“@include 样式名称”。
例:
@minin rounded-corners{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
使用:
.notice {
background-coloe:green;
border:1px solid red;
@include rounded-corners;
}
sass最终生成:
.notice{
background-coloe:green;
border:1px solid red;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
混合器滥用会造成加载缓慢,为了避免滥用,需思考是否需要混合器,这个混合器体现的作用是什么,
混合器是展示性吧描述,用来描述一条css规则应用之后会产生怎样的效果。
混合器里面除了包含属性,还可以包含css规则。
@minxin no-bullents{
list-style:none;
li{
list-style-image:none;
list-style-type;none;
margin-left:9px;
}
}
给混合器传参:
通过给混合器传参,混合器能生成不同的样式。
@minin link-colors($normal,$hover,$visited){
color:$normal;
&:hover{color:$hover;}
&:visited{color:$visited;}
}
a{
@include link-colors(blue,red,green);//类似于函数传递参数。参数也可以这样($normal:blue,$visited:green,$hover:red)
}
最终生成:
a{color:blue;}
a:hover{color:red;}
a:visited{color:green;}
为了在@include混合器时不必传入所有的参数,可以给参数设定一个默认值$name:default-value。
@mixin link-colors(
$normal,
$hover:$normal,
$visiter:$normal
){
color:$normal;
&:hover{ color:$hover;}
&:visited{ color:$visited;}
}
在使用混合器时之传入了一个参数时,其他参数也自动赋值已赋值参数的值。
选择器继承,即一个选择器可以继承另一个选择器定义的所有样式,通过@extend语法实现。
.error{
border:1px red;
background-color:red;
}
.seriousError{
@extend .error;
border-width:2px;
}
.seriousError不仅会继承error自身的所有样式,还会继承任何跟.error有关的组合选择器样式。
比如.error a,h1 .erro的样式,在.serousError a和hi .serousError也会体现。
继承是建立在语义化的关系上,一个类是另一个类的细化的时候使用。