一、Less语法
1.变量声明：
@变量名:变量值;
1 @newHeight:20px;
2.调用变量：
1 .box { 2 width: @newHeight; 3 height: @newHeight; 4 }
3.多重继承（Mixins）：调用已有的类作为自己成员
1 .box1 { 2 .box; 3 }
4.带参数函数：
1 .newBox(@newWidth) { 2 height: @newWidth; 3 } 4 .box2 { 5 .newBox(20px); 6 }
5.嵌套：（CSS中不能存在嵌套）
1 .box1 { 2 height: 200px; 3 width: 100px; 4 .box2 { 5 height: 200px; 6 width: 50px; 7 } 8 }
1 /*以下两种格式的代码实现的是同一种效果*/ 2 a { 3 &:hover { 4 color: red; 5 } 6 } 7 8 a:hover { 9 color: red; 10 }
二、Sass/Scss语法
Sass省去了CSS中的作为表示作用域的花括号{}和语句末尾的分号; ，改用缩进和换行；以“.sass”结尾的文件；
Scss也是Sass的一种形式，它的语法中使用{}和;，变量使用$声明；通常一般用Scss，以“.scss”结尾的文件。
1.变量声明和调用：
1 /*声明*/ 2 $newWeight: 30px; 3 /*调用*/ 4 .box { 5 width: $newWeight; 6 }
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 }
用占位符声明的类，若一直没有调用，则不会在编译后的“.css”文件中存在占位符的类。
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
