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 }
用占位符声明的类,若一直没有调用,则不会在编译后的“.css”文件中存在占位符的类。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。