本文摘自PHP中文网,作者PHP中文网,侵删。
一、Less语法 1.变量声明:
@变量名:变量值;
2.调用变量:
1 2 | 1 .box {2 width: @newHeight;3 height: @newHeight;
4 }
|
3.多重继承(Mixins):调用已有的类作为自己成员
4.带参数函数:
1 | 1 .newBox(@newWidth) {2 height: @newWidth;3 }4 .box2 {5 .newBox(20px);6 }
|
5.嵌套:(CSS中不能存在嵌套)
1 | 1 .box1 {2 height: 200px;3 width: 100px;4 .box2 {5 height: 200px;6 width: 50px;7 }8 }
|
1 | 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 | 1 2 $newWeight : 30px;3 4 .box {5 width: $newWeight ;6 }
|
2.属性嵌套:
1 | 1 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 | 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 | 1 . global {2 3 outline: 1px solid red;4 }5 6 input[type= "text" ] {7 color: yellow;8 @extend .golbal;9 }
|
5.占位符:
1 | 1 %test {2 width: 20px;3 }4 .box {5 @extend %test;6 }
|
用占位符声明的类,若一直没有调用,则不会在编译后的“.css”文件中存在占位符的类。
以上就是Less与Sass框架如何使用?的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css背景怎么设置
css 背景不滚动的实现方法
详解css行高line-height属性
css中的position是什么意思
如何使用css让背景图片不重复
css给图片添加水印
css中字体怎么设置
分享div+css前端命名的规则
css字间距怎么设置
css样式不生效是怎么回事
更多相关阅读请进入《Less》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » Less与Sass框架如何使用?