Less介绍

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

CSS预处理器框架与CSS后后处理器框架

CSS预处理器典型代表：SASS、Less、Stylus。CSS后处理器典型代表：cssnext(基于 PostCSS) 、myth(基于 Rework)

Less的嵌套

ul{
   color:red;
   li{  line-height:48px;
      a{text_decoration:none
         &:{color:#f70;}
       }
   }
}

Less 运算

Less 语言中支持运算，我们可以给变量进行一些运算操作，例如加 +、减 -、乘 *、除 / 四个运算符，这四个运算符可以对任何数字、颜色或变量进行运算。一般运算符在进行加、减计算之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。

示例：

<html>
    <head>
        <meta charset="utf-8">
        <title>Less学习(9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./index.css">
    </head>
    <body>
        <div class="content">
            <h3>欢迎来到侠课岛！</h3>
            <p class="p1">这里是前端部分</p>
            <p class="p2">这里是Python部分</p>
        </div>
    </body>
</html>

现在的需求是，我们要给上述内容设置字体大小，比如标题字体大小为 28px，第一段字体大小为 18px，第二段字体大小为 12px。

然后我们可以创建一个 Less 文件，文件中的内容如下所示：

@fontsize:14px;

.content{
  h3{
    font-size: @fontsize * 2;
  }
  .p1{
    font-size: @fontsize + 4;
  }
  .p2{
    font-size: @fontsize - 2;
  }
}

其中定义了一个变量 @fontsize，值为 14px，然后可以对这个变量进行加减乘除运算，例如上面 h3 的字体大小被设置为 @fontsize * 2 ，14 乘以 2 等于28 等，其他同理。

下面为编译后的 CSS 代码：

.content h3 {
  font-size: 28px;
}
.content .p1 {
  font-size: 18px;
}
.content .p2 {
  font-size: 12px;
}

转义

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。

@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
编译为：

@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
注意，从 Less 3.5 开始，可以简写为：

@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}

注释

// 会隐藏
/* css  注释*/

导入

 使用@import命令来进行导入
 如果使用@import进行导入的时候，取决于不同的文件扩展名
 @import “xxx.less”;
 @import "xxx.css"