CSS 预处理

CSS 预处理器是对 CSS 的扩展语言，允许使用变量、嵌套、混入（Mixin）、运算等编程特性，最终编译生成标准 CSS 文件。它让代码更整洁、可复用性更强、维护更便捷。

目前主流的 CSS 预处理语言有 Less、Sass、Stylus 三种。

使用方法

• 方法一：引入 Less.js 文件

去官网下载 Less.js，在页面中引入以下两行代码：

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="Less.js" type="text/javascript"></script>

• 方法二：软件编译

推荐使用 Koala，免费的图形化编译器，界面简洁，操作方便。

• 方法三：编辑器插件

以 HBuilderX 为例，安装 Less 插件后修改以下配置：

"commands": [
  {
    "id": "LESS_COMPILE",
    "name": "编译 less",
    "command": [
      "${programPath}",
      "${file}",
      "../css/${fileBasename}.css"  // 输出的 CSS 文件路径
    ],
    "extensions": "less",
    "key": "",
    "showInParentMenu": false,
    "onDidSaveExecution": true   // 保存时自动编译
  }
]

完成以上步骤后，保存 .less 文件时会自动在指定目录生成对应的 .css 文件。

语法

1. 注释

• 标准 CSS 注释/* comment */ ，会保留到编译后的文件中。
• 单行注释//comment，之后保留在 less 源文件中，编译后被省略。

2. 变量

Less 支持使用变量，变量名以 @ 开头：

@color:#FF0000;

#div {
    color:@color;
}

@side:left;

#div {
    border-@{side}-radius:5px;
}

3. 嵌套

• 选择器嵌套

#header {
	width: 100px;
	#con {
		font-size: 14px;
		h3 {
			background: #00E5EE;
		}
	}
}

编译后的文件：

#header {
  width: 100px;
}
#header #con {
  font-size: 14px;
}
#header #con h3 {
  background: #00E5EE;
}

在嵌套的代码中，可以使用 & 引用父元素。例如 a:hover 伪类可以写成：

a {
   &:hover { color: #FFAD00; }
}

4. 混入

.box {
	border: 1px solid black;
	background: skyblue;
}

.inner {
	color: white;
	.box;
}

编译后的文件：

.inner {
  color: white;
  border: 1px solid black;
  background: skyblue;
}

• 混入参数

.box(@color: red) {
	background: @color;
}

#header {
	.box(green);
}

编译结果：

#header {
  background: green;
}

调用混入时，如果传入了参数则使用传入的参数，否则使用默认值。当混入没有定义默认值时，调用时必须传入参数，否则编译会报错。

5. 运算

任何数字、颜色或变量都可以参与运算，运算表达式需用括号包裹。

.box { width: (200px - 20) * 2; }

/* 结果 */
.box { width: 360px; }

CSS 预处理器扩展了 CSS 的语言能力，让代码更简洁、层级更清晰、易于维护，大幅减少重复的 CSS 编写工作。