Less 语法特性

　　　　　　　　　　　　　　　　                                 　——（原创翻译：译者添加部分解释和代码运行结果）

                                                ♥在线Less编译器：LESS2CSS

---

 

《一》综述

     Less作为CSS的扩展，不仅能向下兼容CSS，它还使用CSS已有的语法以增加自身的特有属性。这使得学习Less变得简单。

1. 变量：很显而易见的表示方法:
   
   输出：
   
   注意变量其实是一个常数，且只能被定义一次。
   
   

   ---

2. 混合
   混合是从一个包括一系列的属性的样式集到另一个样式集的一种表达方式，如下所示：
   
   我们想在其他的样式集中包含这些属性被，因此，我们只需要从所需的样式集中提取出样式名称即可。输出：
   
   #bordered元素的属性将会出现在#menu a 中（其中同样可以使用.class属性替换）

   ---

3. 嵌套规则
   Less中允许使用嵌套或者级联组合。看如下示例：
   
   输出：
   
   
   可以使用如下的方式达到同样的效果。
   
   输出：（跟上面示例结果一样）
   使用同样的方式还可以绑定伪类，
   
   （其中&表示当前选择器的父元素）
   输出：
   
   
   

   ---

4. 嵌套指令与冒泡
   media 与 keyframe 等指令可以像选择器一样进行嵌套。
   
   条件指令：e.g @Media, @supports 与 @document 也会被选择性复制到对应元素中去。
   
   输出：
   
   剩余的非条件指令，比如：font-face 与 keyframes，也会进行冒泡，对应元素不会改变。
   例如：
   
   输出：
   
   

   ---

5. 操作符
   算法操作符 + - * / 能够操作任何数字，颜色或变量，结果的单位类型为最左边的单位。在加减、比较运算之前会先进行格式转化，如果出现语法错误或表意不明，则将被忽略，比如：px -> cm 或 red->%;
   
   相乘与相除不会转换数字，
   
   

   ---

6. 
   
   
   
   
   
   

   ---

 

 

 

 

 

 

 

 

                                【资源共享，欢迎转载，转载请注明出处:Qbooooble】

原文链接-Less官方文档