Less
定义
Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端
下面通过一些例子来加深对它的理解
情景一
我们知道网页一般有主题色，很多地方都会用到主题色，但如果有一天我们要更换主题色怎么办？是不是要一个一个的替换，这样做是不是显得很麻烦且浪费时间
我们想像，既然这个主题色可能会变，那能不能像编程语言那样将主题色定义成变量
需要使用主题色的地方我们就使用那个变量即可，如果要换直接改变变量值就是这样是不是就解决我们的问题了
如下代码（代码只做理解并不能正常运行）
var mainColor = skyblue;
#title {
background-color: mainColor;
}
#person{
color:mainColor;
}
情景二
我们在编写css的时候有时候可能会写很多重复的样式代码，有时候仅仅因为某个属性的取值不同我们就要不停的复制-----粘贴，这样是不是也很麻烦？
如果我们将那些重复的代码定义成一个”类“，或者一个”函数“是不是可以解决我们的问题
对于属性值的变化我们可以传入参数即可。
如下代码（代码只做理解，并不能正常运行）
.border(color:skyblue){
border-top 1px solid color;
border-bottom: 1px solid color
}//定义一个border类
.div1{
.border;//不传参数默认边框颜色“天蓝”
}
.div2{
.border(red);//指定边框颜色”红“
}
相信看了这里你已经感受到了less的便利之处，上面两种只是其简单运用
如果你想了解更多请访问 Less官网，Less中文网，本篇文章只简单介绍less及其less编译css的方法。
在Less中我们定义变量通过@声明，使用变量时也得加@前缀
@width = 20px;
div{
width:@width;
}
情景二讲到“类”的概念 ，在Less中称为混合(Mixin)
混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法
//定义一个Mixin
.border(@color:skyblue){
border-top: 1px solid @color;
border-bottom :1px solid @color;
}
div{
.border;
}
div2{
.border(red)
}
在Less中也可以使用注释，他的注释分为两种
单行注释“//”这种注释在编译成css文件时会被省略
多行注释 “/**/”这种注释在编译成css文件时不会省略
更多详见官网文档。
Less编译
下面介绍两种编译Less的方法
1.通过命令行进行编译
这种方法使用起来比较复杂但是效率较高。
注意：此方法基于node.js，如果你没有安装node.js请阅读下面步骤安装。
打开node.js的官网https://nodejs.org/zh-cn/
下载node.js
下载后的文件
双击打开，一路点‘next’
这里同意一下
完成后找到安装目录，出现以下文件安装成功
为了方便直接在命令行使用我们需为此目录配置环境变量
配置环境变量的方法这里不在阐述
配置完成后，命令行输入 node -v检测node环境是否搭建好
输入 npm -v检测npm是否搭建好
接下来下载less环境npm install less -g
通过lessc -v检测less环境是否搭建好
上述操作完成后我们试着编译less文件lessc less文件cmd窗口预览编译后的css样式lessc less文件 > css文件将编译后的less文件写入到css文件中
新建less文件如下
//less测试文件
/* less多行注释 */
@width:800px;
@height:300px;
#container{
//设置container元素
width:@width;
height:@height;
//设置container里面的nav元素
#nav{
width:100%;
height:100%;
//设置nav里面的直接子代元素（ul > li）
> ul > li{
float: left;
list-style: none;
//设置 #nav > ul > li 里面的a元素
a{
color:red;
text-decoration: none;
}
}
}
}
编译后的css样式
写入文件
编译后的css文件
/* less多行注释 */
#container {
width: 800px;
height: 300px;
}
#container #nav {
width: 100%;
height: 100%;
}
#container #nav > ul > li {
float: left;
list-style: none;
}
#container #nav > ul > li a {
color: red;
text-decoration: none;
}
2.引入less.js文件编译less文件
这种方式直接在浏览器使用
<link rel="stylesheet/less" type="text/css" href="less.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
//less测试文件
/* less多行注释 */
@width:800px;
@height:300px;
#container{
//设置container元素
width:@width;
height:@height;
border:1px solid red;
//设置container里面的nav元素
#nav{
width:100%;
height:100%;
//设置nav里面的直接子代元素（ul > li）
> ul > li{
float: left;
list-style: none;
//设置 #nav > ul > li 里面的a元素
a{
color:red;
text-decoration: none;
}
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet/less" type="text/less" href="less.less">
</head>
<body>
<div id='container'>
<div id="nav">
<ul>
<li><a href="#">2134567i88i7u6</a></li>
</ul>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>
</body>
</html>
这种方式只能以HTTP的方式打开，不然无法使用less
上一篇： 寄存器映射