介绍

LESS以类似编程语言形式去书写CSS代码，可以解决下列的问题：

  • 重复的样式值：例如基本的颜色、常用长度宽度大小等
  • 重复的CSS代码段：例如浮动和清除浮动代码大多数地方是一致的
  • 重复的嵌套书写：利用各种选择器选择元素的重复难以阅读的嵌套书写

原理

LESS本身是一个预编译器，使用LESS语法的代码，浏览器是不能识别的，需要通过LESS预编译器编译成.css文件才能正常使用。

安装

这里我选择开发环境安装。

npm i less --save-dev

编译命令

npx lessc 【需要编译的.less文件路径】 【编译后的.css文件路径】

在webpack中使用less-loader

npm i less-loader --save-dev

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: "development",
    devServer: {
        open: true
    },
    module: {
        rules: [
            { test: /\.less$/, use: ["style-loader", "css-loader?modules", "less-loader"] },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html"
        })
    ]
}

使用

变量（Variables）
@base-color:#000;
@border-color:#782;
@border-color-hover:lighten(@link-color,20%);
body{
  background-color: @base-color;
}
.footer{
  border: 1px solid @base-color;
}
.border{
  color:@border-color
}
.border:hover{
  color: @border-color-hover;
}

编译为：

body {
  background-color: #000;
}
.footer {
  border: 1px solid #000;
}
.border {
  color: #782;
}
.border:hover {
  color: #30360e;
}

以上封装了@border-color-hover，@border-color，@border-color-hover三个变量

混合（Mixins）
.clearFloat{
  display: block;
  content: '';
  clear: both;
}

.nav::after{
  .clearFloat()
}

.footer::after{
  .clearFloat()
}

编译为：

.clearFloat {
  display: block;
  content: '';
  clear: both;
}
.nav::after {
  display: block;
  content: '';
  clear: both;
}
.footer::after {
  display: block;
  content: '';
  clear: both;
}

通过混合把.clearFloat的代码直接复用到伪元素::after中，不用重复书写相同代码。

嵌套（Nesting）
.nav{
  width: 80%;
  .nav-item{
    float: left;
    width: 60px;   
    &>.point{
      width: 5px;
      height: 5px;
      border-radius: 50%;
    } 
  }
}

编译为：

.nav {
  width: 80%;
}
.nav .nav-item {
  float: left;
  width: 60px;
}
.nav .nav-item > .point {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

通过编译后的代码可以看出，LESS嵌套可以减少书写重复的CSS嵌套。& 表示代表父级元素。

运算（Operations）
@a:300px;
@b:10cm;
@c:@b - @a;
@e:15%;
.nav{
  width: @c;
  height: @e * 3;
}

编译为：

.nav {
  width: 2.0625cm;
  height: 45%;
}

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

转义（Escaping）
@max-mda:~"(max-width:850px)";
.nav{
  @media @max-mda{
    background-color: #000;
  }
}

编译为：

@media (max-width:850px) {
  .nav {
    background-color: #000;
  }
}

任何 ~“anything” 或 ~‘anything’ 形式的内容都将按原样输出。
从 Less 3.5 开始，可以简写为：

@max-mda:(max-width:850px);
.nav{
  @media @max-mda{
    background-color: #000;
  }
}
函数（Functions）
@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width);
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}

编译为：

.class {
  width: 50%;
  color: #f6430f;
  background-color: #f8b38d;
}

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在Less 函数手册中有详细介绍。

命名空间和访问符
#base() {
  .button {
    &>.child{
      color: #fff;
    }
  }
}

.nav{
  #base.button.child();
}

编译为：

.nav {
  color: #fff;
}

把 .child 的css代码混入到 .nav 类中。

映射（Maps）

从 Less 3.5 版本开始，混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

#config-color(){
  base:#fff;
  error:red;
}
.msg{
  color:#config-color[base];
  background-color: #config-color[error];
}

编译为：

.msg {
  color: #fff;
  background-color: red;
}
作用域（Scope）
@width:100px;
.nav{
  @width:150px;
  .item{
    width: @width;
  }
}
.list{
  width: @width;
}

编译为：

.nav .item {
  width: 150px;
}
.list {
  width: 100px;
}

和javascript的作用域类似，先使用当前作用域下的变量，如果查找不到，继续查找使用父级或祖先的变量。

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

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

块注释和行注释都可以使用

导入（Importing）

index.less

@import "a"; //引入a.less
@import "base.css";
.nav{
  width: @width;
  height: @heigh;
}

a.less

@width:100px;
@heigh:50px;

base.css

body{
    margin: 0;
    padding: 0;
}

编译为：

@import "base.css";
.nav {
  width: 100px;
  height: 50px;
}

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