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  关键字

上一篇 下一篇

猜你喜欢

热点阅读