今天节后第一天，各位工友陆陆续续开始搬砖了，第一阶段的学习接近了尾声。节前的课程 第18天：CSS中的权重 比较重要，记得学习。
写 CSS 的时候常会遇到很多痛点，比如不能定义变量、结构不清晰、不易维护等等。随着社区的不断发展，便出现了 less 这种类似于 CSS 的库，它能有效避免我所提到的问题。
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less中文网
你可以像使用 CSS 一样使用 Less，CSS 中的所有语法规则都适用于 Less，但是 Less 却为 CSS 增加了新的特性。在实际的项目开发中，一般需要把 Less 转换成 CSS 供浏览器使用。官方也提供了 Less 转换 CSS 的工具。
可以通过 npm（node package manager）安装 Less 转换 CSS 的工具，安装 node 后，npm 会自动安装。可以通过下面的地址来安装 node，http://nodejs.cn/download/。安装完 node 后通过 npm 来安装 less 工具，在终端执行命令：
npm install -g less我们写一段 Less 代码来学习 Less 的使用，创建下面几个文件：
├── base.less 用来定义一些变量，比如字体颜色，背景颜色├── index.html 显示最终结果的demo├── layout.css 由 less 编译后生成的 css 文件└── layout.less less 文件base.less：
@main-color: #1565C0;@text-color: #222222;@des-color: #999999;@backgroud-color: #eeeeee;@edge-width: 16px;@small-edge-width: 8px;@strong-color: red;@nomal-font-size: 18px;
.wx-border { border: solid 1px @main-color;}变量是通过 @name 来定义的，其它 less 可以使用已经定义好的变量。
layout.less：
通过 @import 来导入在 base.less 中定义的变量及选择器：
@import "./base.less";定义 header 选择器，使用这种嵌套的方式可以有效避免 CSS 选择器名字重复的问题，它其实最后会被编译成后代选择器，A B { } 。& 表示引用父选择器的名字。
.header { padding: 0 @edge-width; background-color: @backgroud-color; .title { // @text-color 在 base.less 定义好的变量 color: @text-color; font-size: @nomal-font-size; &::first-letter { font-size: 24px; color: @strong-color; } } p a { color: @main-color; font-size: @nomal-font-size; /**&:hover 相当于 a:hover**/ &:hover { color: @strong-color; } } p:nth-child(3) { width: 100px; text-align: center; padding: @small-edge-width; /**引用在 base.less 定义好的选择器 **/ .wx-border(); }}把这段代码通过 less 工具编译，在终端输入，会把结果输入到当前目录下的 layout.css 文件中：
lessc layout.less layout.css编译结果：
.header { padding: 0 16px; background-color: #eeeeee;}.header .title { color: #222222; font-size: 18px;}.header .title::first-letter { font-size: 24px; color: red;}.header p a { color: #1565C0; font-size: 18px;}.header p a:hover { color: red;}.header p:nth-child(3) { width: 100px; text-align: center; padding: 8px; border: solid 1px #1565C0;}定义一个 footer 选择器，属性的值可以使用运算符做运算：
.footer { padding: 0 @edge-width; background-color: @backgroud-color; margin-top: @small-edge-width; #alert { // 编译后结果会被计算出来 width: @edge-width + 80px; height: 100px; line-height: 100px; margin: 0 auto; }}通过 less 工具编译，在终端输入，会把结果输入到当前目录下的 layout.css 文件中：
lessc layout.less layout.css编译结果：
.footer { padding: 0 16px; background-color: #eeeeee; margin-top: 8px;}.footer #alert { width: 96px; height: 100px; line-height: 100px; margin: 0 auto;}Less 中还提供了一些函数、字符串、数组的功能，这里举一个在 第9天：自我介绍 这节课程中使用的 CSS，定义如下：
.dsa-box div:nth-child(1) { background-image: url('./images/1.png');}.dsa-box div:nth-child(2) { background-image: url('./images/2.png');}.dsa-box div:nth-child(3) { background-image: url('./images/3.png');}.dsa-box div:nth-child(4) { background-image: url('./images/4.png');}.dsa-box div:nth-child(5) { background-image: url('./images/5.png');}.dsa-box div:nth-child(6) { background-image: url('./images/6.png');}.dsa-box div:nth-child(7) { background-image: url('./images/7.png');}.dsa-box div:nth-child(8) { background-image: url('./images/8.png');}.dsa-box div:nth-child(9) { background-image: url('./images/9.png');}这段 CSS 代码很长，但是很有规律，使用 Less，5 行代码即可搞定，以后如何想加入新的图片也非常方便。代码原理就是使用 rang 生成 1 到 9 这几个数字，通过 each 来遍历，然后生成对应的选择器。
each(range(9), { .dsa-box div:nth-child(@{value}) { background-image: url("./images/@{value}.png"); }});使用也非常简单，和使用 CSS 一样，我们只是用被编译好的 layout.css 文件：
<!DOCTYPE html><html lang="en"><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</title> <link rel="stylesheet" href="./layout.css"></head><body> <div class="header"> <p class="title">我是Less，使用我很方便</p> <p><a href="http://lesscss.org/#" target="_blank">想用我就点我吧</a></p> <p>LESS -> CSS</p> </div> <div class="footer"> <p id="alert">到底了</p> </div></body></html>最终效果如下：
总结
今天的打卡指令（任选一个）：
1.工作中你使用的是 less 还是 sass？
2.开工愉快；
http://lesscss.org/
312
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
