1.变量声明:
@变量名:变量值;
1 @newHeight:20px;
2.调用变量:
1 .Box {2 width: @newHeight;3 height: @newHeight; 4 }
3.多重继承(Mixins):调用已有的类作为自己成员
4.带参数函数:
5.嵌套:(CSS中不能存在嵌套)
二、Sass/Scss语法
Sass省去了CSS中的作为表示作用域的花括号{}和语句末尾的分号; ,改用缩进和换行;以“.sass”结尾的文件;
Scss也是Sass的一种形式,它的语法中使用{}和;,变量使用$声明;通常一般用Scss,以“.scss”结尾的文件。
1.变量声明和调用:
2.属性嵌套:
1 /*将Box1的border设置为1px solid red的边框*/ 2 .Box1 { 3 wiodth: $newWeight; 4 border: { 5 top: 1px solid red; 6 right: 1px solid red; 7 bottom: 1px solid red; 8 left: 1px solid red; 9 }10 }
3.混合宏:
1 /*声明不带参数的混合宏*/ 2 @mixin newName { 3 width: 50px; 4 } 5 /*调用不带参数的混合宏*/ 6 .Box { 7 @include newName; 8 } 9 /*声明带参数的混合宏*/10 @mixin newName($newColor) {11 background-color: $newColor;12 }13 /*调用带参数的混合宏*/14 .Box2 {15 @include newNmae(red);16 }
4.继承:
1 .global {2 3 outline: 1px solid red;4 }5 /*继承使用extend*/6 input[type=text] {7 color: yellow;8 @extend .golbal;9 }
5.占位符:
1 %test {2 width: 20px;3 }4 .Box {5 @extend %test;6 }