CSS 预处理器
作者: dkvirus 发表于: 2018-06-25 15:41:00 最近更新: 2018-07-18 09:06:16

一、预处理器之 Less

每一门技术的出现都是为了解决现存的问题,同样的,Less 的出现是为了解决 CSS 中过于呆板的写法。Less 官方文档 中对 Less 的使用有详细的介绍,总结一下为:Less = 变量 + 混合 + 函数。如果你对 js 和 css 有所了解,那么就可以很快的掌握并在你的项目中使用 Less。

1. Less 使用初体验

1.1 使用 Less 写样式

使用 Npm 全局安装 Less

1
$ npm install less -g

创建一个空文件夹,这里命名为:learn-less

在根目录下创建 index.html 文件,复制内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初识 Less</title>
<link href="./main.css" rel="stylesheet">
</head>
<body>
<div class="container">1</div>
<div class="container2">2</div>
<div class="container3">3</div>
</body>
</html>

在根目录下创建 main.less 文件,复制内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// main.less
@width: 100%;
@height: 100px;
@color: red;

.container{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
}

.container2{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
}

.container3{
width: @width;
height: @height;
background-color: @color;
margin-bottom: 5px;
}

现在打开浏览器看一下,会发现并没有加载样式。这是因为 index.html 中引入的样式文件是 main.css 而不是 main.less。所以接下来,我们需要将 main.less 转换为 main.css,不用担心,这一步骤并不需要你手动操作,仅仅是运行一条命令就会自动完成转换。

1
$ lessc main.less

操作完以上步骤就会发现在根目录下生成了一个 main.css 文件,此时再打开浏览器看看,样式已经出现了。

main.css 转义内容为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.container {
width: 100%;
height: 100px;
background-color: red;
margin-bottom: 5px;
}
.container2 {
width: 100%;
height: 100px;
background-color: red;
margin-bottom: 5px;
}
.container3 {
width: 100%;
height: 100px;
background-color: red;
margin-bottom: 5px;
}

如果你使用了 Webstorm 作为开发工具,那么连手动输入命令行这一步都可以跳过,因为 Webstorm 会在你的 .less 文件被修改后自动生成对应的 .css 文件,具体配置跳转:Webstorm 配置 Less 自动转译成 css

1.2 感受 Less 的便利

现在有一个新的需求,需要将三个 div 的背景颜色改成蓝色(blue),如果是之前 css 的写法需要依次找到 container、container2、container3,对应修改里面的 background-color 属性,但是使用 less 我们仅仅修改前面定义过的变量值即可。

1
2
3
4
5
6
// main.less
@width: 100%;
@height: 100px;
@color: blue;

...

使用 lessc main.less 进行转译后打开浏览器可以看到三个 div 的背景颜色已经被改变了。

2. 变量

在前面介绍的案例中已经使用了“变量”的概念,是不是感觉和 js 很像,事实上 less 就是用 js 的写法来写 css。

官网在介绍变量的时候会给出很多应用场景,总结一下就是使用 @ 符号定义变量,使用 @ 符号获取变量,仅仅将 @变量名 看成是一个字符串。

1
2
3
4
5
6
@classname: main;
@color: red;

.@classname{
background-color: @color;
}

从上面例子中可以看到,变量不仅仅可以作为样式属性值:background-color: @color;,还可以作为类名:.@classname 表示的就是 .main。这也就是为什么说仅仅将 @变量名 看成是一个字符串。

3. 混合

先看一个 example.css 文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

#menu span {
height: 16px;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

#menu p {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

可以看到上面三个样式中都有 border-topborder-bottom 两个属性,并且内容完全相同;在传统 CSS 写法中只能这样一遍有一遍的去书写重复的内容,在 Less 中通过将公共属性抽取出来作为一个公共类的方式规避这一点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// example2.less
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

#menu a {
color: #111;
.bordered;
}

#menu span {
height: 16px;
.bordered;
}

#menu p {
color: red;
.bordered();
}

将以上 example2.less 进行转译成 example2.css 文件为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu span {
height: 16px;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu p {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

可以看到 examle2.css 与 example.css 很相似,只是多了一个 .bordered 样式。

修改 example2.less,将 .bordered 写成 .bordered(),此时在进行转译之后会看到 example2.css 和 example.css 文件就完全一样了,使用 less 书写更加简单。

1
2
3
4
5
6
7
// example2.less
.bordered() {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

...

总结:

  • 混合也是减少代码书写量的一个方法;
  • 混合的类名在定义的时候加上小括弧 (),那么在转译成 css 文件时就不会出现;
  • 混合的类名在被调用的时候加上小括弧 ()和不加上小括弧 ()是一样的效果,看个人习惯,如:第三行和第八行转译成 css 是一样的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    1 #menu span {
    2 height: 16px;
    3 .bordered;
    4 }
    5
    6 #menu p {
    7 color: red;
    8 .bordered();
    9 }

4. 函数

曾几何时,在书写呆板的 css 时有没有想过让类名动态化,根据不同的参数生成不同的样式。看下面的示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
// func.less
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}

使用 $ lessc func.less 进行转译 func.css 文件内容如下:

1
2
3
4
5
6
7
8
9
10
#header {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.button {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

可以看到,这里就用到了函数的概念,在 #header.button 中分别传入不同的参数,结果也就生成不同的代码。

关于 less 中函数的写法还有以下几种:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// 函数的参数设置默认值:
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

// 函数有多个参数时用分号隔开
.mixin(@color; @padding:2) {
color-2: @color;
padding-2: @padding;
}

// 函数如果没有参数,在转译成 css 时就不会被打印出来,详见上面混合中的示例
.wrap() {
text-wrap: wrap;
}

// 函数参数如果有默认,调用时就是通过变量名称,而不是位置
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}

// 函数参数有个内置变量 @arguments,相当于 js 中的 arguments
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}

// 函数名允许相同,但参数不同,类似于 java 中多态的概念
.mixin(@color: black) {
.mixin(@color: black; @margin: 10px) {

当然,上面是开发人员自定义的函数,Less 也为我们定义了很多好用的内置函数。关于内置函数,如果掌握,可以在开发过程中节约很多时间,由于内置函数数量很多,这里就不一一介绍,传送门:Less 内置函数官方文档

5. 父子元素的写法

在 css 中父子元素的写法通常如下:

1
2
3
4
5
6
.container {
padding: 0;
}
.container .article {
background-color: red;
}

在 Less 写法如下,父子嵌套关系一目了然。

1
2
3
4
5
6
.container {
padding: 0;
.article {
background-color: red;
}
}

当然,父子元素还要一种是伪类的写法,在 css 中写法如下:

1
2
3
4
5
6
7
8
#header :after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}

在 less 中写法如下,可以看到引入了新的符号 &,以 & 来代替主类 #header

1
2
3
4
5
6
7
8
9
10
#header {
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}

6. 神奇 @import

在传统 css 文件中,每个文件都是独立的。在 less 中可以像 js 的模块那样在一个 less 文件中引入另一个 less 文件。

创建 one.less 文件:

1
2
3
4
.container {
width: 100px;
height: 200px;
}

创建 two.less 文件:

1
@import "one";

使用 $ lessc two.less 转译成 two.css 文件,可以看到内容如下:

1
2
3
4
.container {
width: 100px;
height: 200px;
}

@import 的作用可以看成是将 one.less 的内容复制一份到当前 .less 文件中。

那么如果 two.less 中也有一个类名叫 container 的,使用 @import 之后会变成什么样子呢?这个留给自行测试好啦。

二、预处理器之 Stylus

1. 感受 Stylus

原生 css 写法

1
2
3
4
5
6
7
8
body {
font: 12px Helvetica, Arial, sans-serif;
}
a.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

stylus 写法:去掉花括弧 {}去掉冒号:去掉行尾分号;严格缩进两个空格。这就是 stylus 所谓的进步!!

1
2
3
4
5
6
7
8
9
10
border-radius()
-webkit-border-radius arguments
-moz-border-radius arguments
border-radius arguments

body
font 12px Helvetica, Arial, sans-serif

a.button
border-radius 5px

其它的和 Less 相似,可以定义变量,复用代码段。相比之下,我更喜欢 Less,保留 css 原本的特性与写法,仅仅提供变量来减少代码量,而不是 stylus 完全将 css 变成了另外一个东东。

Stylus 实际操作中遇到的两个 恶心的地儿

  • 严格缩进2个空格。写代码喜欢用 tab 建进行缩进,而 tab 建通常是 4 个空格,但 stylus 强行要 2 个空格的缩进,一个个移动累死人;
  • 无法格式化代码。我使用的 vscode 开发工具,也安装了 stylus 插件,仅仅有代码高亮显示,无法进行格式化 stylus 代码,体验分 -10。
首页
友链
归档
dkvirus
动态
RSS