来自 tutorialzine 的速学教程系列，原创翻译，LESS 快速入门。

原创翻译，英文原文地址

10分钟学LESS

我们都知道CSS有一些不足之处，尤其是面对一个上千行代码的大项目时。我们往往会不停的复制相同的代码，搜索替换每一个需要修改的颜色值。这会花费大量的精力和规范来确保CSS代码的可维护性。但不一定非得这样。

幸运的是，Web开发社区已经解决了这个问题。我们现在可以使用CSS预处理器，比如 Less、Sass 和 Stylus。相比于单纯的CSS，CSS预处理器拥有诸多优势。

  • 变量，可以在样式表中定义变量并且轻松修改它们的值。（这或许会成为CSS的新特性）
  • 动态计算值。（CSS中有calc，但是只能计算长度）
  • 混合（Mixins），重用、组合样式，甚至可以传入参数。
  • 函数，提供了大量实用的功能，用来处理颜色，把图片转成 data-uri 等等。

使用预处理器的缺点是，你需要编译成CSS文件好让浏览器认识。

1. 起步

Less 是使用 JavaScript 编写的，需要 Node.js 环境或者浏览器环境运行。你可以在你的网站上引入 less.js，它能实时编译所有的 .less 样式表，但这样编译很慢并且不被推荐。推荐的方式是在部署前将 less 样式表编译为 CSS 文件。有许多的图形化编译程序可以编译 .less 文件，但这篇文章会讲解 node 环境中的编译方法。

如果你已经安装了 node，那么打开命令行，使用 NPM 来安装 Less：

1
npm install -g less

然后你就可以在任何命令行中使用 lessc 命令，把 .less 文件编译成普通的 CSS 文件：

1
lessc styles.less > styles.css

如果我们的样式规则全部写在 styles.less 中的话，上面那行命令，我们的样式表会转换为普通的 CSS 文件：styles.css。仅剩的工作就是把样式表引入到 HTML 中。如果编译出错，错误会显示在命令行中。

2. 变量 Variables

Less 的特性之一就是可以像其他编程语言一样创建变量。变量可以存储各种类型的变量，如常见的：颜色、大小、选择器、字体名称、URL等等。Less 的哲学是尽可能的重用 CSS 语法规则。

这里我们定义了两个变量，一个是背景颜色，另一个是字体颜色，都包含了十六进制数值。下面是 Less 和编译的 CSS 代码：

LESS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@background-color: #ffffff;
@text-color: #1A237E;
p{
  background-color: @background-color;
  color: @text-color;
  padding: 15px;
}
ul{
  background-color: @background-color;
}
li{
  color: @text-color;
}

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
p{
  background-color: #ffffff;
  color: #1A237E;
  padding: 15px;
}
ul{
  background-color: #ffffff;
}
li{
  color: #1A237E;
}

在上面的栗子中，背景颜色是白色，而字体颜色是黑色的，如果我们希望背景颜色是黑色的而文字是白色的，我们可以简单地修改变量的值，而不是手动一个一个替换。

更多关于变量的信息阅读更多。

3. 混合 Mixins

Less 让我们可以将已有的类或 id 的样式用在别的选择器上。下面的栗子将会说明这点：

LESS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#circle{
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle{
  width: 50px;
  height: 50px;
  #circle
}
#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#circle {
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

如果你不希望混合代码出现在编译出的 CSS 中你可以在混合后添加一对圆括号：

LESS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#circle(){
  background-color: #4CAF50;
  border-radius: 100%;
}
#small-circle{
  width: 50px;
  height: 50px;
  #circle
}
#big-circle{
  width: 100px;
  height: 100px;
  #circle
}

CSS

1
2
3
4
5
6
7
8
9
10
11
12
#small-circle {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  border-radius: 100%;
}
#big-circle {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
  border-radius: 100%;
}

另一件很酷的事情是混合可以接受参数。在接下来的栗子中我们会给 circles 添加参数直径，默认值是 25px。然后我闷创建一个直径 25px 的小圆和一个直径 100px 的大圆。

LESS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#circle(@size: 25px){
  background-color: #4CAF50;
  border-radius: 100%;
  width: @size;
  height: @size;
}
#small-circle{
  #circle
}
#big-circle{
  #circle(100px)
}

CSS

1
2
3
4
5
6
7
8
9
10
11
12
#small-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 25px;
  height: 25px;
}
#big-circle {
  background-color: #4CAF50;
  border-radius: 100%;
  width: 100px;
  height: 100px;
}

更多关于 Less 混合 官方文档.

4. 嵌套和作用域

嵌套可以让样式表的结构和 HTML 结构相匹配，减少冲突。以下是一个无序列表的栗子：

LESS

1
2
3
4
5
6
7
8
9
10
11
ul{
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
  li{
    background-color: #fff;
    border-radius: 3px;
    margin: 10px 0;
  }
}

CSS

1
2
3
4
5
6
7
8
9
10
ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  background-color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}

就像在别的编程语言中，Less 中的变量的值和作用域相关，如果当前作用域中没有说明，那么 Less 会向上层寻找最近的声明。

编译成 CSS 后，我们的 li 的文字是白色的，因为我们在 ul 中提前定义了 @text-color 变量。

LESS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@text-color: #000000;
ul{
  @text-color: #fff;
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
  li{
    color: @text-color;
    border-radius: 3px;
    margin: 10px 0;
  }
}

CSS

1
2
3
4
5
6
7
8
9
10
ul {
  background-color: #03A9F4;
  padding: 10px;
  list-style: none;
}
ul li {
  color: #ffffff;
  border-radius: 3px;
  margin: 10px 0;
}

更多关于作用域请看这里。

5. 运算

你可以进行基本的数学运算来计算数值和颜色。假设我们有两个 div 摆放在一起，第二个 div 的宽度是第一个两倍并且有不同的背景。Less 知道如何处理不同的单位。

LESS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@div-width: 100px;
@color: #03A9F4;
div{
  height: 50px;
  display: inline-block;
}
#left{
  width: @div-width;
  background-color: @color - 100;
}
#right{
  width: @div-width * 2;
  background-color: @color;
}

CSS

1
2
3
4
5
6
7
8
9
10
11
12
div {
  height: 50px;
  display: inline-block;
}
#left {
  width: 100px;
  background-color: #004590;
}
#right {
  width: 200px;
  background-color: #03a9f4;
}

6. 函数

Less 支持函数！这让 Less 看起来更像正经编程语言啦~

我们来看看 fadeout，一个减小颜色透明度的函数。

LESS

1
2
3
4
5
6
7
8
9
10
11
@var: #004590;
div{
  height: 50px;
  width: 50px;
  background-color: @var;
  &:hover{
    background-color: fadeout(@var, 50%)
  }
}

CSS

1
2
3
4
5
6
7
8
div {
  height: 50px;
  width: 50px;
  background-color: #004590;
}
div:hover {
  background-color: rgba(0, 69, 144, 0.5);
}

上面的代码中，当 div 处于 hover 状态时它会变成半透明使得鼠标移入的变化更加简单。还有许多其他的处理颜色、检测图片尺寸甚至将资源以 data-uri 的形式嵌入样式表的函数。完整的函数列表

延伸阅读

你现在已经知道了足够多的信息来开始使用 Less！每一个 CSS 文件都是一个有效的 Less 样式表，所以你可以立即开始清理旧的冗长的 .css 文件。随着学习的深入，代码会不断的精进。这是接下来阅读建议：

  • 所有的语言特性 – 链接
  • LESS 函数参考指南 – 链接
  • 在浏览器中编辑和编写 – 链接