SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能。
混入
混入(Mixin)用来分组那些需要在页面中复用的CSS声明,开发人员可以通过向Mixin传递变量参数来让代码更加灵活,该特性在添加浏览器兼容性前缀的时候非常有用,Scss目前使用@mixin name
指令来进行混合操作。
@mixin border-radius($radius) {
border-radius: $radius;
-ms-border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
.box {
@include border-radius(10px);
}
上面的代码建立了一个名为border-radius
的Mixin,并传递了一个变量$radius
作为参数,然后在后续代码中通过@include border-radius(10px)
使用该Mixin,最终编译的结果如下:
.box {
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px; }
继承
继承是Scss中非常重要的一个特性,可以通过@extend
指令在选择器之间复用CSS属性,并且不会产生冗余的代码,下面例子将会通过Scss提供的继承机制建立一系列样式:
// 这段代码不会被输出到最终生成的CSS文件,因为它没有被任何代码所继承。
%other-styles {
display: flex;
flex-wrap: wrap;
}
// 下面代码会正常输出到生成的CSS文件,因为它被其接下来的代码所继承。
%message-common {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-common;
}
.success {
@extend %message-common;
border-color: green;
}
.error {
@extend %message-common;
border-color: red;
}
.warning {
@extend %message-common;
border-color: yellow;
}
上面代码将.message
中的CSS属性应用到了.success
、.error
、.warning
上面,魔法将会发生在最终生成的CSS当中。这种方式能够避免在HTML元素上书写多个class
选择器,最终生成的CSS样式是下面这样的:
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333; }
.success {
border-color: green; }
.error {
border-color: red; }
.warning {
border-color: yellow; }
混入和继承使用场景
1.需要进行传递变量的时候选择混入,继承没有传递变量的功能
2.继承因为这样会合并在一起,例如上面例子生成
.message, .success, .error, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333; }
而混入只会生成多个,例如
.box1 {
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px; }
.box2 {
border-radius: 10px;
-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px; }
所以此时继承就可以减少内存