LESS的语法特性

作者: 科研者 | 来源:发表于2017-09-30 10:46 被阅读0次

以下内容是我在学习和研究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. 模式匹配

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

相关文章

  • LESS/SASS学习记录

    LESS 参考资料:LESS官网w3cplus less入门教程 less的编译 less特性及语法 变量——V...

  • LESS的语法特性

    以下内容是我在学习和研究LESS时,对LESS的特性、重点和注意事项的提取、精练和总结,可以做为LESS特性的字典...

  • Less

    Less是什么? Less css是动态样式库 类似css的语法 赋予css新的特性 如变量、继承、运算、函数等 ...

  • Less学习笔记

    Less作为 CSS 的一种扩展,不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法,你可以在任何...

  • less基础

    less less语法学习

  • 浅析less语法

    浅析less语法 less是一种动态样式语言。作为CSS的一种扩展,Less不仅完全兼容CSS语法,而且less将...

  • web与全端开发课程幕布笔记

    直接点击: LESS简介、语法以及LESS与Bootstrap的并用 幕布文档思维导图:LESS简介、语法以及LE...

  • vue2 less less-loader 的用法

    LESS基础语法 我们一起来学习一下LESS的基础语法,LESS的基础语法基本上分为以下几个方面:变量、混合(Mi...

  • sublime-text 常用插件汇总

    语法支持插件 1.语法支持 LESS,Sass,SCSS,Styls和Jade(或其它) LESS https:/...

  • less语法和Rem,媒体查询适配方案

    Less基础语法介绍 作用: 维护CSS, 按照CSS的基本语法去写.https://less.bootcss.c...

网友评论

    本文标题:LESS的语法特性

    本文链接:https://www.haomeiwen.com/subject/mzsgextx.html