介绍
CSS中如何实现继承（扩展）呢？很多编程语言都支持继承（或扩展），在一个基类的基础上添加新的属性或者方法，比如下面是JavaScript中的继承（扩展）语法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| class Base {
constructor() {
this.baseProperty = 'base';
}
baseMethod() {
console.log('base method');
}
}
class Extended extends Base {
constructor() {
super();
this.extendedProperty = 'extended';
}
extendedMethod() {
console.log('extended method');
}
}
|
通过继承，我们可以把共同的属性或者方法抽象到基类中，然后在子类中添加新的属性或者方法。那么问题来了，CSS中是否也有类似的语法来实现继承（扩展）呢？
原生CSS中的继承
很遗憾，原生CSS并没有提供类似于编程语言中的继承（扩展）语法。早期CSS曾出现过@apply语法，但是现在这个提案已经被废弃了，不推荐使用。
虽然原生CSS没有语法层面的支持，但是我们可以采用多个选择器的方式来实现这种效果，假设我们有三个button，分别时normal、warning和error，这三种button除了颜色不一样之前，其他属性诸如宽度，高度、边框、字体等都是相同的，我们可以这样写：
先定义定义公共的button样式：
1
2
3
4
5
6
| .button {
width: 100px;
height: 50px;
border-radius: 8px;
border: 3px solid white;
}
|
然后为三种button分别指定颜色：
1
2
3
4
5
6
7
8
9
| .normal-button {
background-color: #4caf50;
}
.warning-button {
background-color: #ff9800;
}
.error-button {
background-color: #f44336;
}
|
最后使用这些样式的时候，为每个button都指定.button类和他们各自的颜色类：
1
2
3
| <button class="button normal-button">Normal</button>
<button class="button warning-button">Warning</button>
<button class="button error-button">Error</button>
|
这种方法虽然不是正统意义上的继承，但是同样可以达到避免冗余代码的效果。
CSS Module中的继承
CSS Module并不是CSS预处理器，而是一种CSS模块化的方式，它允许我们将CSS样式封装在模块中，并且可以通过导入的方式来使用其他模块的样式。CSS Module的文件名都是以.module.css结尾，比如users.module.css。
在CSS Module中，可以使用composes关键字来实现样式的继承（扩展）。假设我们有一个基础的按钮样式button.module.css，内容如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
.button {
width: 100px;
height: 50px;
border-radius: 8px;
border: 3px solid white;
}
.normal-button {
composes: button;
background-color: #4caf50;
}
.warning-button {
composes: button;
background-color: #ff9800;
}
.error-button {
composes: button;
background-color: #f 44336;
}
|
使用的时候，就无需在指定.button类了，直接使用各自的颜色类即可：
1
2
3
| <button class="normal-button">Normal</button>
<button class="warning-button">Warning</button>
<button class="error-button">Error</button>
|
SaSS中的继承
SaSS（Syntactically Awesome Style Sheets）是一个CSS预处理器，它提供了许多强大的功能，包括变量、嵌套、混合宏（mixins）和继承等。SaSS中的继承可以通过@extend指令来实现。
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
|
.button {
width: 100px;
height: 50px;
border-radius: 8px;
border: 3px solid white;
}
.normal-button {
@extend .button;
background-color: #4caf50;
}
.warning-button {
@extend .button;
background-color: #ff9800;
}
.error-button {
@extend .button;
background-color: #f44336;
}
|
使用方法也是一样的：
1
2
3
| <button class="normal-button">Normal</button>
<button class="warning-button">Warning</button>
<button class="error-button">Error</button>
|
Less中的继承
Less是另一个流行的CSS预处理器，它也提供了类似于SaSS的继承功能。Less中的继承可以通过&:extend语法来实现。
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
|
.button {
width: 100px;
height: 50px;
border-radius: 8px;
border: 3px solid white;
}
.normal-button {
&:extend(.button);
background-color: #4caf50;
}
.warning-button {
&:extend(.button);
background-color: #ff9800;
}
.error-button {
&:extend(.button);
background-color: #f44336;
}
|
使用方法同上。
好了，今天就到这里，祝大家编程愉快，我们明天再见，觉得有用，就点个关注吧！