sass初步认识3

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也会体现。

继承是建立在语义化的关系上，一个类是另一个类的细化的时候使用。

 

转载于:https://www.cnblogs.com/lionisnotkitty/p/5912933.html