LESS的语法特性

以下内容是我在学习和研究LESS时，对LESS的特性、重点和注意事项的提取、精练和总结，可以做为LESS特性的字典，方便大家查阅；

注意：
本文采用ABNF语法范式来描述语法规则，对于不熟悉ABNF语法范式的同学，可以参考《语法格式描述规范BNF和ABNF》

1. 变量

定义：

变量的定义 = “@”<变量名>“:”[变量值]“;”
变量名::= 标识符
变量值::= 任意类型

使用：

变量的使用 = “@”<变量名表达式>
变量名表达式 = 变量名 | 变量的使用

2. 字符串插值

字符串插值 = “@{”<变量名>“}”

3. 作用域

• LESS中的作用域是块级作用域；
• LESS编译器在查找标识符时，首先会从当前作用域中查找标识符（如：变量或者混合模块），如果没找到的话则会去父级作用域中查找，以此类推，直到找到为止；
• 变量的定义会被提升至该变量所在作用的顶部；所以，变量可以先使用后定义；

4. LESS样式规则

定义：

LESS样式规则::= 由LESS特性扩展的CSS样式规则
CSS样式规则 = <选择器列表> “{” [CSS属性列表] “}”
CSS属性列表 = {CSS属性的定义}
CSS属性的定义 = “:”<属性值>";"

5. 混合

定义：

混合的定义 = <单个选择器> [“(” [参数列表] “)”] “{” [属性列表] “}”
参数列表 = {参数项}
单个选择器 = class选择器 | id选择器 | 属性选择器
属性列表 = { 属性项 }
属性项 = css属性的定义 | LESS样式规则

使用：

混合的使用 = <单个选择器>[“(” [入参数列表] “)”]“;”

效果：
混合的使用 会被替换成 混合的定义 中的 属性列表；

特性：

• 不参数的混合的定义会被编译成相应的css；
• 带参数的混合的定义不会被编译成相应的css；
• 参数项可以是具体的值；如果参数项是具体的值，则在使用该混合时，只有传入的参数的值与该具体值相匹配时，该混合才会生效；这个特性就是Less的模式匹配；

6. JavaScript表达式

调用JavaScript表达式 = “`”[JavaScript表达式]“`”

7. 注释

注释 = 单行注释 | 多行注释
单行注释 = “//”[注释内容]
多行注释 = “/*”[注释内容]“*/”

注意：
在编译成 CSS 后，单行注释会被删除；

8. 不编译语法

不编译语法 = ‘~“’ [不需编译的内容] ‘”’

9. 引导

引导用来指定Less规则生效的条件，相当于条件语句的功能；
语法：

引导表达式 = when 条件列表
条件列表 = {<逻辑关系> <条件项> }
条件项 = "(" <条件表达式> ")"
逻辑关系 = “,” | "and" | "not"

取值：
逻辑关系的取值：

逗号 ,  表示逻辑或
and 表示 逻辑与
not 表壳逻辑非

条件表达式可用的比较运算符有：> < = >= =<
关键字true只表示布尔真值，除去关键字true以外的值都被视示布尔假；

10. 模式匹配

在定义带参数的混合时，参数项可以是具体的值；如果参数项是具体的值，则在使用该混合时，只有传入的参数的值与该具体值相匹配时，该混合才会生效；