Less简介和环境搭建

Less是一种CSS预处理语言。我们知道CSS其实就是一种配置文件，它的语法非常简单，但这也给我们造成了一定的麻烦，比如我们要统一为某类组件指定其宽度width，CSS中我们不得不在一堆class中指定相同的width数值，如果我们突然想起来要改一下这个值就非常困难了。Less扩展了CSS，在CSS的基础上增加了变量、嵌套、混入（Mixin）、运算等功能，让样式表更具结构性、可维护性和复用性。

总而言之，Less能让较复杂的CSS工程编写变得简单，本系列笔记我们主要学习Less中的常用语法。

后续补充：CSS中现在也支持变量了，但Less中依然有大量可以方便样式编写的语法值得学习。

环境搭建

less.min.js

使用Less最简单的办法是在网页中加载一个即时编译器将less编译成css样式并应用到页面上。我们可以直接引入下面代码，也可以下载下来后从本地引入。

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>

在页面中引入less样式表文件例子如下。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Less Demo</title>
    <link rel="stylesheet" type="text/less" href="style.less" />
    <script src="less.min.js"></script>
</head>

<body>
    <div class="app">hello</div>
</body>

</html>

注意：less.min.js必须放在所有引入less的标签后，这样引入的less样式表文件才能生效。具体来说，less.min.js会在页面上插入一个style节点，包含所有less文件的编译输出。

lessc

less.min.js在真实环境中较少使用，毕竟引入无关紧要的less文件和编译器增大了网络传输开销，我们也可以用Less编译器手动编译并载入页面。

执行以下命令全局安装Less编译器。

npm install -g less

执行以下命令编译一个Less文件。

lessc style.less style.css
作者：Gacfox
版权声明：本网站为非盈利性质，文章如非特殊说明均为原创，版权遵循知识共享协议CC BY-NC-ND 4.0进行授权，转载必须署名，禁止用于商业目的或演绎修改后转载。