什么是CSS 预处理器

发布时间：2023-03-13 12:46:27 所属栏目：教程来源：

导读：CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成 CSS 的程序，CSS 预处理器有许多种，如 less、SCSS、styles、PostCSS，这四个是目前用的最多的。

预处理器有一套自己的语法，最终能编译出 CSS，主流的

CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成 CSS 的程序，CSS 预处理器有许多种，如 less、SCSS、styles、PostCSS，这四个是目前用的最多的。

预处理器有一套自己的语法，最终能编译出 CSS，主流的几个预处理器语法类似，基础语法很容易掌握。以下篇幅围绕预处理器 less 展开，主要是为了了解什么是预处理器。

SCSS 安装过程中经常会碰到 node-scss 依赖安装缓慢，可以考虑使用 dart-scss。

1. 安装 less
less 也可以通过 npm 进行安装。

先在一个空目录初始化项目，然后安装 less。

npm init -y
npm i less -D

2. 使用 less
修改 package.json 中的 scripts 配置项。

// package.json
"scripts": {
"compile": "lessc style.less style.css"
},
完成后再新建几个测试用的文件。

一个是 index.html，另一个是 style.less。


<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>less</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
我是一个文本节点
<p>我是一个段落 <a href="//immoc.com">我是个超链接啦</a></p>
</div>
</body>
</html>
// style.less
.container {
color: red;
p {
color: blue;
a {
color: green;
}
}
}
index.html 中要引入 .css 文件，而不是 .less 文件。

观察 compile 命令，意思就是用less编译器将将 style.less 进行编译，然后输出到 style.css，所以 index.html 要引入 style.css。

一切就绪后就 npm run compile !。

执行后目录下就会多一个 style.css 文件。

.container {
color: red;
}
.container p {
color: blue;
}
.container p a {
color: green;
}
打开 index.html 就可以发现样式生效了。

其实 style.less 的内容不解释，自己摸索也很容看出是什么意思，这是一种嵌套语法，通过嵌套的关系来对应节点的关系。

嵌套是最常用的特性，个人认为也是预处理器中最重要的特性，其实许多前端开发者也只会用到变量、嵌套两个特性。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!