CSS 预处理器
CSS 预处理器是能让你通过预处理器自己独有的语法来 CSS 的程序。
CSS 预处理器有许多种,如 less
、SCSS
、styles
、PostCSS
,这四个是目前用的最多的。
预处理器有一套自己的语法,最终能编译出 CSS
。
主流的几个预处理器语法类似,基础语法很容易掌握。
以下篇幅围绕预处理器 less
展开,主要是为了了解什么是预处理器。
SCSS
安装过程中经常会碰到 node-scss
依赖安装缓慢,可以考虑使用 dart-scss
。
less
也可以通过 npm
进行安装。
先在空目录初始化项目,然后安装 less
。
npm init -y
npm i less -D
package.json
中的 scripts
配置项。
// package.json
"scripts": {
"compile": "lessc style.less style.css"
},
完成后再新建几个测试用的。
是 index.html
,另是 style.less
。
<!-- index.html -->
<!DOCTYPE html>
@H__136@@H__136@<html lang="en">
@H__136@@H__136@<head>
@H__136@@H__136@< charset="UTF-8">
@H__136@@H__136@< name="viewport" content="width=device-width, initial-scale=1.0">
@H__136@@H__136@<title>less@H__136@@H__136@</title>
@H__136@@H__136@<link rel="stylesheet" href="style.css">
@H__136@@H__136@</head>
@H__136@@H__136@<body>
@H__136@@H__136@<div class="container">
我是文本节点
@H__136@@H__136@<p>我是段落 @H__136@@H__136@<a href="//immoc.com">我是个超啦@H__136@@H__136@</a>@H__136@@H__136@</p>
@H__136@@H__136@</div>
@H__136@@H__136@</body>
@H__136@@H__136@</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
的不解释,自己摸索也很容看出是什么意思,这是一种嵌套语法,通过嵌套的关系来对应节点的关系。
嵌套
是最常用的特性,个人认为也是预处理器中最重要的特性,其实许多前端开发者也只会用到变量、嵌套两个特性。
less 还提供了如变量、循环、条件分支等特性,利用这些特性可以少很多冗余的 CSS
,这些特性可以去官方文档进一步挖掘。