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官方文档