Less

Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更易维护和扩展。

更少可以运行在Node或浏览器端。

本质

本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

安装

首先安装Node.Js(安装方式查看Node安装方式)

npm install -g less

查看版本

lessc -v

配置

本次编码软件使用VScode，安装对应的插件Easy Less即可

使用

变量

创建.less文件使用吧

Less

@charset "UTF-8";
/* 
注释：
    在css当中可以使用，所有编译的过程当中生成在css文件
*/
// 注释：css不支持,不会编译在css文件


/*变量*/
//必须@前缀，：是等于的以上，必须分号结束；
//不能以数组开头，不能包含特殊字符，区分大小写

@mainColor: #e92323;
@className: box;

div {
    background: @mainColor;
}

a:hover {
    color: @mainColor;
}

//变量用于字符拼接使用方法
.@{className} {
    color: @mainColor;
}

CSS

@charset "UTF-8";
/* 
注释：
    在css当中可以使用，所有编译的过程当中生成在css文件
*/
/*变量*/
div {
  background: #e92323;
}
a:hover {
  color: #e92323;
}
.box {
  color: #e92323;
}

Mixin混入

类混入

Less

@charset "UTF-8";
/*组合样式*/

.w50 {
    width: 50%;
}

.f_left {
    float: left;
}

.f_right {
    float: right;
}

// 类混入
.w50-f_left {
    // 有点像继承父类样式的感觉
    .w50();
    .f_left();
}

CSS

@charset "UTF-8";
/*组合样式*/
.w50 {
  width: 50%;
}
.f_left {
  float: left;
}
.f_right {
  float: right;
}
.w50-f_left {
  width: 50%;
  float: left;
}

可以发现，编译生成的CSS文件直接进行了样式组合，可有一点确是在Less定义的,w50于f_left等类样式也编译到了CSS文件，如果有时候并不想单独的使用，只是想组合成多种的样式库，那么这将会有冗余代码，因此Less不仅有类的混入，还有函数混入

函数混入

Less

@charset "UTF-8";
/*组合样式*/

// 定义成函数
.w50() {
    width: 50%;
}

.f_left() {
    float: left;
}

.f_right() {
    float: right;
}

// 类混入
.w50-f_left {
    .w50();
    .f_left();
}

CSS

@charset "UTF-8";
/*组合样式*/
.w50-f_left {
  width: 50%;
  float: left;
}

这下发现生成的CSS文件一下就变得精简了许多，但是对于Less文件维护性又不是特别高，浮动函数一次性写许多个，因此可以再次改进一下

Less

@charset "UTF-8";

// 定义成函数
.w50() {
    width: 50%;
}

// 浮动函数,设置默认值为 left
.float(@direction: left) {
    float: @direction;
}
// 圆角函数(带兼容)
.boderRadius(@width: 100px) {
    // 兼容性封装函数解决
    border-radius: @width;
    -webkit-border-radius: @width;
    -moz-border-radius: @width;
    -o-border-radius: @width;
    -ms-border-radius: @width;
}

// 类混入
.w50-f_left {
    .w50();
    .float();
    .boderRadius(30px);
}

.w50-f_left {
    .w50();
    .float(right);
}

CSS

@charset "UTF-8";
.w50-f_left {
  width: 50%;
  float: left;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -o-border-radius: 30px;
  -ms-border-radius: 30px;
}
.w50-f_left {
  width: 50%;
  float: right;
}

嵌套

Less

@charset "UTF-8";
// 样式的嵌套

.s_box {
    // s_box的样式
    display: block;

    // s_box下的 img 的样式
    img {
        display: block;
    }

    // 连接情况加：&
    &:hover {
        border: 1px solid #ccc;
    }

    &::before {
        content: "";
    }

    >div {
        width: 100%;
    }
}

CSS

@charset "UTF-8";
.s_box {
  display: block;
}
.s_box img {
  display: block;
}
.s_box:hover {
  border: 1px solid #ccc;
}
.s_box::before {
  content: "";
}
.s_box > div {
  width: 100%;
}

导入

test.less

@charset "UTF-8";

// 定义成函数
.w50() {
    width: 50%;
}

// 浮动函数,设置默认值为 left
.f(@direction: left) {
    float: @direction;
}

.boderRadius(@width: 100px) {
    // 兼容性封装函数解决
    border-radius: @width;
    -webkit-border-radius: @width;
    -moz-border-radius: @width;
    -o-border-radius: @width;
    -ms-border-radius: @width;
}

// 类混入
.w50-f_left {
    .w50();
    .f();
    .boderRadius(30px);
}

main.less

@charset "UTF-8";
// 导入 tt 里的样式
@import "tt";

ul {
  .w50();
  li {
    // 调用样式函数
    .f();
    .boderRadius();
  }
}

main.css

@charset "UTF-8";
.w50-f_left {
  width: 50%;
  float: left;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -o-border-radius: 30px;
  -ms-border-radius: 30px;
}
ul {
  width: 50%;
}
ul li {
  float: left;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -o-border-radius: 100px;
  -ms-border-radius: 100px;
}

在浏览器使用less

less无法在浏览器端直接使用
浏览器不识别
必须解析成css代码
通过less解析插件（javascript）
引入less文件需要加上type=”text/less”