2.1 变量
sass允许使用变量,所有变量以$开头
$blue : #1875e7;
div { color : $blue; }
如果变量需要嵌套在字符串中,就必须需要写在#{}之中
$side: radius;
border-#{$side}: 20px;
2.2计算功能
sass允许在代码中使用算式:
body { margin: (14px/2); top: 50px + 100px; right: $var \* 10%; }
2.3嵌套
div h1{
color:red;
}
可以写成:
div {
h1{
color:red;
}
}
在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:
> a { &:hover { color: #ffb3ff; } }
2.4 代码的重用
继承
sass允许一个选择器,继承另一个选择器
.class1 {
border: 1px solid #ddd;
}
class2要继承class1,就要使用@extend命令
> .class2 {
> @extend .class1;
> font-size:120%;
> }
Mixin
使用@mixin命令,定义一个代码块。
@minix left{
float:left;
margin-left:10px;
}
使用@include命令,调用这个mixin
div{
@include left;
}
