Less是一门CSS预处理语言,为了解决CSS中过于呆板的写法。
Less = 变量 + 混合 + 函数
变量
(1)使用 @ 符号定义变量
(2)使用 @ 符号获取变量
(3)变量为完全的‘常量’,只能定义一次。

混合
(1)定义一些通用的属性集为一个class,然后在另一个class中去调用。

(2)如果想要隐藏属性集,不让它暴露给CSS文件。

(3)带参数

(4)参数设置默认值

(5)多个参数 @arguments

(6)模式匹配
根据传入的参数,来改变混合的默认呈现。

(7)导引
根据表达式进行匹配

可以使用 and 关键字,实现与条件。

可以使用 逗号,实现或条件。

可以使用 not 关键字,实现非条件。

嵌套规则

运算

命名空间

作用域

import
引入 .less 文件,后缀可省略。
@import 'lib.less'
@import 'lib'
字符串插值

网友评论