为什么要学习LESS?

就是为了少写代码啊！
LESS是CSS的预处理语言，在CSS语言的基础上，进行了语法扩展。
增加了变量、继承、函数等功能，让CSS代码书写更简洁，提高代码复用性、逻辑性，在管理大型项目时更容易修改和维护。
同时，相对于其它预处理语言，LESS也更容易学习和使用。

如何在我的项目中使用LESS?

LESS是CSS的预处理语言，使用它的目的是最终产出CSS代码，所以LESS并不能被HTML直接调用，需要先进行编译后，生成最终CSS文件，在放到HTML中使用。
这个过程是不是很麻烦？在没有使用LESS前，很多人会这样想。
但其实并不麻烦，现在你可能通过VS Code + Easy LESS插件来使用快速开发调试。

开发工具配置

1.在VS Code扩展中查找Easy LESS，并安装，安装后重启动VS Code。
2.重启后，在次进入扩展，点击Easy LESS右下的齿轮，进行扩展设置，点击在Settings.json中编辑，在json中输入如下内容。

{
    "typescript.locale": "zh-CN",
    "less.compile": {
        "compress": false,//是否进行压缩
        "sourceMap": true,//是否生成map文件
        "out": true, // 是否输出css文件
        "outExt": ".css", // 输出文件后缀,小程序开发'wxss'
    }
}

第一次使用LESS

1.在VS Code中新建一个文件夹，创建一个文件index.html，输入如下内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="Style.css">
</head>
<body>
    <div class="layout">
        <div class="header"></div>
    </div>
</body>
</html>

2.在创建一个文件Style.less，输入如下内容：

@x:100px;//变量
@y:@x+100px;//运算
@color:rgb(228, 161, 17);
.layout{
    width: @x * 2;
    height: @y * 2;
    background-color: @color;
    .header{
        width: 100px;
        height: @y;
        background-color: @color+#999;
    }
}

3.当你保存Style.less文件时，会自己创建出Style.css和Style.css.map两个文件，Style.css就是最终通过LESS语法创建的CSS文件，Style.css.map是你在通过浏览器调试时，告诉浏览器CSS对应Less文件的代码位置，方便调试使用。

LESS基础知识

变量（Variables）

使用@+名称定义和使用变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

编译为：

#header {
  width: 10px;
  height: 20px;
}

混合（Mixins）

将一组属性混入到另一个规则集的方法。

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  .bordered();
}

嵌套（Nesting）套娃模式

Less 模仿了 HTML 的组织结构进行书写。

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

运算（Operations）

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

注释（Comments）

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

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

导入（Importing）

@import "library"; // library.less
@import "typo.css";

四时宝库

程序员的知识宝库

学了CSS为什么还要学LESS?（学完css之后学什么）