LESS 让css也支持变量，运算符，include,嵌套规则等等

LESS 是一种 CSS 预处理器，它扩展了 CSS 的功能，使其支持变量、运算符、包含（include）和嵌套规则等特性。下面是详细的攻略：

1. 安装 LESS

首先，你需要安装 LESS。你可以通过 npm（Node Package Manager）来安装 LESS，使用以下命令：

npm install -g less

2. 创建 LESS 文件

创建一个新的 LESS 文件，例如 styles.less。

3. 使用变量

LESS 允许你定义变量，并在样式中使用它们。你可以使用 @ 符号来定义变量。例如，你可以定义一个主色变量：

@main-color: #ff0000;

然后，在样式中使用这个变量：

h1 {
  color: @main-color;
}

这样，所有的 h1 元素都会应用主色。

4. 使用运算符

LESS 还支持使用运算符来计算样式值。例如，你可以定义一个变量来表示页面宽度，并使用运算符来计算其他元素的宽度：

@page-width: 960px;

.container {
  width: @page-width;
}

.sidebar {
  width: (@page-width / 4);
}

在这个例子中，.container 的宽度将为 960px，而 .sidebar 的宽度将为 240px。

5. 使用 include

LESS 提供了 @import 规则，用于包含其他 LESS 文件。这使得代码的组织和维护更加方便。例如，你可以将样式分为多个文件，并在主文件中包含它们：

@import \"variables.less\";
@import \"layout.less\";
@import \"typography.less\";

这样，variables.less、layout.less 和 typography.less 中的样式将被包含在主文件中。

6. 嵌套规则

LESS 允许你在样式规则中嵌套其他规则。这样可以减少代码的嵌套层级，使代码更加清晰。例如，你可以这样写：

ul {
  list-style: none;

  li {
    padding: 5px;
  }
}

这样，所有的 li 元素都会继承 ul 的样式，并且有自己的额外样式。

这就是使用 LESS 扩展 CSS 的基本攻略。通过使用变量、运算符、include 和嵌套规则，你可以更加灵活和高效地编写样式表。