Less
2018-07-12 本文已影响0人
青青玉立
Less是什么?
Less css是动态样式库 类似css的语法 赋予css新的特性 如变量、继承、运算、函数等
常用国人开发的LESS/SASS编译工具 Koala 编译工具来编译样式文件
安装: npm install -g less
Less结构
1. less注释
2. 变量(@开头)
混合(mixin)变量、带参数的混合
3. 匹配模式
4. less中运算(数字、颜色或者变量的计算)
5. less嵌套规则
6. @arguments 变量、避免编译、!important 关键字
Less语法
1. 变量
@base: #f938ab; //声明变量
.box { color: @base; } //使用变量
2. 混合
混合无参数使用 混合带参数使用3. 匹配模式
例子4. 引导
导引中可用的比较运算有: > >= = =< <
关键字true只表示布尔真值
导引序列使用逗号‘,’—分割,当且仅当所有条件都符合时,才会被视为匹配成功
如果想基于值的类型进行匹配,我们就可以使用is*函式
iscolor、isnumber、isstring、iskeyword、isurl
判断一个值是纯数字,还是某个单位量:ispixel、ispercentage、isem
导引序列中可以使用and关键字实现与条件
5. 运算
6.嵌套规则
7. @arguments 变量
@arguments 包含所有传递进来的参数
8. 避免编译 ~
实例9. !important 关键字