6、Less快速入门指南

Less快速入门指南

1. Less语法探索

在掌握了安装相关的理论知识后，接下来让我们深入了解构成Less的语法。在后续内容中，我们将逐步深入探讨Less库的各个部分。在此之前，先快速浏览一下其中一些重要部分，首先从变量开始。

2. 变量的使用

在编写CSS样式时，我们常常会遇到一个或多个样式在多处重复出现的情况。例如，在处理多个形状时，可能需要对边框或前景色使用相同的值：

.shape1 {
  color: #5cb100;
  border: 1px solid #5cb100;
}
.shape2 {
  background: #fff;
  color: #5cb100;
}
.shape3 {
  border: 1px solid #5cb100;
}

作为网页设计师，我们可以在代码中直接使用相同的颜色值。但如果我们预先设定了一组特定的颜色，之后又需要全部更改，该怎么办呢？逐个修改每个样式虽然可行，但在样式繁多的网站上，很难保证不遗漏任何一处。

为了解决这个问题，我们可以使用变量来存储每个颜色的常量值，并在整个样式表中使用这些变量：

@my-color: #5cb100;
.shape1 { color: @my-color; border: 1px solid @my-color; }
.shape2 { background: #fff; color: @my-color; }
.shape3 { border: 1px solid @my-co