CSS预编译器-less

css预编译器

基本原理

编写css时，由于css语言本身，常常难以处理一些问题

• 重复的样式值：例如常用颜色、常用尺寸
• 重复的代码段：例如绝对定位居中、清除浮动
• 重复的嵌套书写

由于官方迟迟不对css语言本身做出改进，一些第三方机构开始想办法来解决这些问题

其中一种方案，便是预编译器

预编译器的原理很简单，即使用一种更优雅的方式来书写样式代码，通过一个编译器将其转换为可被浏览器识别的传统css代码

目前，最流行的预编译器有LESS和SASS，由于它们两者特别相似，因此仅学习一种即可

less官网：http://lesscss.org/
less中文文档1（非官方）：http://lesscss.cn/
less中文文档2（非官方）：https://less.bootcss.com/
sass官网：https://sass-lang.com/
sass中文文档1（非官方）：https://www.sass.hk/
sass中文文档2（非官方）：https://sass.bootcss.com/

less的安装与使用

从原理克制 要使用less 必须安装less编译器

LESS编译器是基于node开发的，可以通过npm下载安装

npm i -D less

安装好了less之后，它提供了一个CLI工具lessc，通过该工具即可完成编译

lessc less代码文件 编译后的文件

试一试:

新建一个index.less文件，编写内容如下：

// less代码
@red: #f40;

.redcolor {
    color: @red;
}

运行命令：

lessc index.less index.css

可以看到编译之后的代码：

.redcolor {
  color: #f40;
}

LESS的基本使用

具体的使用见文档：https://less.bootcss.com/

• 变量：在less中用@符号+所用的变量

index.less代码
@red: #f40;
@width:200px;
.redcolor{
    color: @red;
    width: 20px + @width;
}
装换后的css代码
.redcolor {
  color: #f40;
  width: 220px;
}

• 混合
  混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

.redcolor {
  color: #f40;
  width: 220px;
  border: 1px solid red;
}

如果我们希望在其它规则集中使用这些属性呢？没问题，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

@red: #f40;
@width:200px;
.borded{
    border: 1px solid red;
};
.redcolor{
    color: @red;
    width: 20px + @width;
    .borded();
}

• 嵌套
• Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

.allcolor .greencolor {
  color: red;
}
.allcolor .bluecolor {
  color: blue;
}
.allcolor:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

那么less代码为

.allcolor{
    .greencolor{
        color: red;
    }
    .bluecolor{
        color: blue;
    }
    &:after {
        content: " ";
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
      }

}

• 运算（Operations）
  算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

// 所有操作数被转换成相同的单位
@c 5cm + 10mm; // 结果是 6cm
@c2: 2 - 3cm - 5mm; // 结果是 -1.5cm

@in: 2 + 5px - 3cm; // 结果是 4px
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
乘法和除法不作转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而 CSS 是不支持指定区域的。Less 将按数字的原样进行操作，并将为计算结果指定明确的单位类型。
@base: 2cm * 3mm; // 结果是 6cm
你还可以对颜色进行算术运算：
@color: #224488 / 2; //结果是 #112244
background-color: #112244 + #111; // 结果是 #223355

• 函数
• Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。

 @primary: #f40;
.size{
  height:100px
}
背景颜色在主颜色的基础上加深
.s2{
  background: draken(@primary,20%);
  @primary代表颜色 20%代表加深的程度
  color:#fff;
  .size();
}
.s3{
  background: draken(@primary,40%);
  color:#fff;
  .size();
} 

• 作用域: Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

  @height:60px;
.header{
  @height: 56px;
  height: @height;
  .menu{
    height
      height:@height;
    
 
  }
}
.abc{
  height:@height;
  /* 用的是外部的height */
}

• 导入：你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less
@import "typo.css";
// 导入模块，如果导入的是css会原封不变到css结果里
如果导入的两个覆盖了 那么后面的覆盖前面的

@import "common.less";
@import "theme.less";
@import "abc.css";

• 注释：块注释和行注释都可以使用：
  块注释，单行注释，多行注释

//单行注释less注释，不会到css编译结果去
/* 多行注释 */会到编译结果去


/* 一个块注释
 * style comment! */
@var: red;

// 这一行被注释掉了！
@var: white;