首页 > 代码库 > Less 语法特性

Less 语法特性

                                                  ——(原创翻译:译者添加部分解释和代码运行结果)

                                                ♥在线Less编译器:LESS2CSS


 

《一》综述

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

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


  2. 混合
    混合是从一个包括一系列的属性的样式集到另一个样式集的一种表达方式,如下所示:
    技术分享
    我们想在其他的样式集中包含这些属性被,因此,我们只需要从所需的样式集中提取出样式名称即可。输出:
    技术分享
    #bordered元素的属性将会出现在#menu a 中(其中同样可以使用.class属性替换)
  3. 嵌套规则
    Less中允许使用嵌套或者级联组合。看如下示例:
    技术分享
    输出:
    技术分享

    可以使用如下的方式达到同样的效果。
    技术分享
    输出:(跟上面示例结果一样)
    使用同样的方式还可以绑定伪类,
    技术分享
    (其中&表示当前选择器的父元素)
    输出:
    技术分享


  4. 嵌套指令与冒泡
    mediakeyframe 等指令可以像选择器一样进行嵌套。

    条件指令:e.g @Media, @supports@document 也会被选择性复制到对应元素中去。
    技术分享
    输出:
    技术分享
    剩余的非条件指令,比如:font-face 与 keyframes,也会进行冒泡,对应元素不会改变。
    例如:
    技术分享
    输出:
    技术分享

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









 

 

 

 

 

 

 

 

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

原文链接-Less官方文档

Less 语法特性