定义变量使用
$theme-color: #f10215;
$main-color: green;
使用:
main{
color:$theme;
}
mixin使用:
将样式混入到其他地方使用
scss文件中定义变量:例如
@mixin border($deg,$1,$2,$3,$4){
// 定义的样式
// 听过角度deg去控制哪个方向是渐进色
border-image:-webkit-linear-gradient($deg, #FF8002, #B5C915, #5ABB91) $1,$2,$3,$4;
}
使用如下:
1.引入定义变量的文件
body{
@include border(0,0,0,0,5)
}
继承
继承是SASS中非常重要的一个特性,可以通过@extend指令在选择器之间复用CSS属性,并且不会产生冗余的代码,下面例子将会通过SASS提供的继承机制建立一系列样式:
// 下面这段代码不会被输出到最终生成的CSS文件,因为它没有被任何代码所继承。
%other-styles {
display: flex;
flex-wrap: wrap;
}
// 下面代码会正常输出到生成的CSS文件,因为它被其他使用的地方所继承。
%message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message;
}
.success {