Less与Sass框架如何使用?


本文摘自PHP中文网,作者PHP中文网,侵删。

一、Less语法

  1.变量声明:

    @变量名:变量值;

1

1 @newHeight:20px;

  2.调用变量:

1

2

1 .box {2     width: @newHeight;3     height: @newHeight;   

4 }

  3.多重继承(Mixins):调用已有的类作为自己成员

1

1 .box1 {2     .box;3 }

  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 /*将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

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 /*继承使用extend*/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》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    暂无评论...