Less与Sass框架如何使用？
发布时间：2020-07-09 编辑：jiaochengji.com
教程集为您提供Less与Sass框架如何使用？等资源，欢迎您收藏本站，我们将为您提供最新的Less与Sass框架如何使用？资源
一、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”文件中存在占位符的类。
以上就是Less与Sass框架如何使用？的详细内容，更多请关注教程集其它相关文章！
-->您可能感兴趣的文章：
Less与Sass框架如何使用？
Sass和Compass的安装和使用方法
ESS和Sass的基本特性及区别
怎么在LESS框架中使用使用calc
前端模块化杂谈
常用php代码开发工具有哪些？
JavaScript编程基础(13)-框架编程
php用什么软件编程
利用PostCSS跳进未来的CSS- JS-Republic's Blog
php网站用框架与不用的区别
上一篇：WEB前端规范命名的介绍
下一篇：总结Uploadify使用方法
[关闭]