以下内容是我在学习和研究LESS时,对LESS的特性、重点和注意事项的提取、精练和总结,可以做为LESS特性的字典,方便大家查阅;
注意:
本文采用ABNF语法范式来描述语法规则,对于不熟悉ABNF语法范式的同学,可以参考《语法格式描述规范BNF和ABNF》
1. 变量
定义:
变量的定义 = “@”<变量名>“:”[变量值]“;”
变量名::= 标识符
变量值::= 任意类型
使用:
变量的使用 = “@”<变量名表达式>
变量名表达式 = 变量名 | 变量的使用
2. 字符串插值
字符串插值 = “@{”<变量名>“}”
3. 作用域
- LESS中的作用域是块级作用域;
- LESS编译器在查找标识符时,首先会从当前作用域中查找标识符(如:变量或者混合模块),如果没找到的话则会去父级作用域中查找,以此类推,直到找到为止;
- 变量的定义会被提升至该变量所在作用的顶部;所以,变量可以先使用后定义;
4. LESS样式规则
定义:
LESS样式规则::= 由LESS特性扩展的CSS样式规则
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. 模式匹配
在定义带参数的混合时,参数项
可以是具体的值;如果参数项
是具体的值,则在使用该混合时,只有传入的参数的值与该具体值相匹配时,该混合才会生效;