1.变量
SASS样式中可以使用“$”定义变量,以便重复利用,比如一个字体或一种颜色循环利用,定义如下:
$my-color: #000f body{ color:$my-color; }
2.嵌套定义css
body{ color:$my-color; div{ margin: 0; padding: 0; } }
3.混入
css中我们经常遇到使用相同的语句定义样式,比如margin-top:5px,border-radius:3px,仅仅调用的像素不同,因此在这里可以使用@Mixin达到代码复用,如下:
@Mixin border-radius($radius){ border-radius:$radius; }
div{
@include:border-radius(10px)
}
4.继承
当我们遇到好几个元素都有几个相通的样式,但是又在某一方面有所不同,就可以采用继承的方案解决,如下:
%message{ border: 1px solid #ccc; padding: 10px; color: #333; font:14px; } .message-warning{ @extend %message; color:orange; } .message-warning{ @extend %message; color:red; } .message-warning{ @extend %message; color:green; }
这里也都有color,可以利用上面的混合(@Mixin)定义一个
@Mixin color($color){
color:$color;
}
5.操作符
SASS提供了"+","-","*","/","%"等运算符,可以在统计样式时做简单的计算,如下:
$140px; $height:200px; div{ (900px - $width)/900*100% ; height:(500px - $height)/900*100% }
6.css拓展
引用父级选择器"&"
使用 & 表示父级元素选择器,如下:
a{ color: red; &:hover{ color:green } body.firefox & { font-weight: normal; } } /*===== CSS =====*/ a { color: red; } a:hover { color:green } body.firefox a { font-weight: normal;
}
父级元素选择器会提替换 & 。
嵌套属性
嵌套属性目的在于对那些有相同命名空间的属性,如,border-radius,border-bottom,border-top,font-size,font-weight,font-family等这些css样式属性,这些都有相同的前缀,所以多次写会显得冗余,因此可以采用嵌套设为同一个命名空间,如下:
div{ /*注意设置统一命名空间需要加 : */ border:{ radius:5px; color:red; bottom:3px; } } /*编译为CSS*/ div{ border- radius:5px; border-color:red; border-bottom:3px; }