Sass之混合宏、继承、占位符

　　1、混合宏。　　

　　当样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目的了。这个时候混合宏就派上用场了。

　　而使用混合宏时，首先要声明混合宏，而声明混合宏时有两种，不带参数混合宏和带参数混合宏两种。

　　1.1 不带参数混合宏的声明要使用关键词@mixin。例如：　　

1@mixin border-radius{
2    -webkit-border-radius: 5px;
3    border-radius: 5px;
4}

　　其中 @mixin 是用来声明混合宏的关键词，有点类似 CSS 中的 @media、@font-face 一样。border-radius 是混合宏的名称。大括号里面是复用的样式代码。

　　例如在一个按钮里要调用上述那个不带参数混合宏时，可以这样使用。

1button {
2    @include border-radius;
3}

　　1.2 带参数混合宏的声明又分为不带任何值的参数和带值的参数。例如：

　　　　1.2.1带值的参数的混合宏声明

1@mixin border-radius($radius:5px){
2    -webkit-border-radius: $radius;
3    border-radius: $radius;
4}

　　在一个按钮中调用上述带值的参数的混合宏声明，可以这样使用

1.btn {
2  @include border-radius;
3}

　　同样的，　但有的时候，页面中有些元素的圆角值不一样，并非是上面的5px，那么可以随机给混合宏传值，如：

1.btn {
2  @include border-radius(50%);
3}

　　1.2.2不带值的参数的混合宏声明

1@mixin border-radius($radius){
2    -webkit-border-radius: $radius;
3    border-radius: $radius;
4}

　　调用不带值的参数的混合宏声明，可以这样做，如：

1.box {
2  @include border-radius(3px);
3}

　　2、继承

　　在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。例如：

1//SCSS
2.btn {
3  border: 1px solid #ccc;
4  padding: 6px 10px;
5  font-size: 14px;
6}
7
8.btn-primary {
9  background-color: #f36;
10  color: #fff;
11  @extend .btn;
12}
13
14.btn-second {
15  background-color: orange;
16  color: #fff;
17  @extend .btn;
18}

　　此时编译出来的css为：

1//CSS
2.btn, .btn-primary, .btn-second {
3  border: 1px solid #ccc;
4  padding: 6px 10px;
5  font-size: 14px;
6}
7
8.btn-primary {
9  background-color: #f36;
10  color: #fff;
11}
12
13.btn-second {
14  background-clor: orange;
15  color: #fff;
16}

　　可以看出在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器。

　　3、占位符%placeholder

　　Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。例如：　

1%mt {
2  margin-top: 5px;
3}
4%pt{
5  padding-top: 5px;
6}

　　这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码：

1//SCSS
2%mt {
3  margin-top: 5px;
4}
5%pt{
6  padding-top: 5px;
7}
8
9.btn {
10  @extend %mt;
11  @extend %pt;
12}
13
14.block {
15  @extend %mt;
16
17  span {
18    @extend %pt;
19  }
20}

　　编译出来的CSS为：

1//CSS
2.btn, .block {
3  margin-top: 5px;
4}
5
6.btn, .block span {
7  padding-top: 5px;
8}

　　从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。

　　然而有些时候我们就在纠结啥时候该用混合宏，啥时候用继承，啥时候用占位符呢？这里先来看个表格吧

　　建议：

1、如果代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

2、如果你的代码块不需要传任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承

Sass之混合宏、继承、占位符

评论区

相关推荐