L3F.WIN

Github及Hexo的使用

0%

学习stylus【16】继承 @EXTEND

发表于 分类于

继承 @EXTEND

Stylus的@extend指令受SASS实现的启发，基本一致，除了些轻微差异。此功能大大简化了继承其他语义规则集的语义规则集的维护。
混入的“继承”
尽管你可以使用混入实现类似效果，但会导致重复的CSS. 典型的模式式定义如下的几个类名，然后归结到一个元素中，例如”warning message”.
该技术实现是没什么问题，但是维护就比较麻烦了。

1
2
3
4
5
6
7
8
9
message,
.warning {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  color: #E2E21E;
}

使用@extend

使用@extend得到同样的输出，只要把对应的选择器传给@extend即可。然后.warning选择器就会继承已经存在的.message规则。

1
2
3
4
5
6
7
8
9
.message {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  @extend .message;
  color: #E2E21E;
}

儿是个更复杂的例子，演示了@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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
red = #E33E1E
yellow = #E2E21E

.message
  padding: 10px
  font: 14px Helvetica
  border: 1px solid #eee

.warning
  @extends .message
  border-color: yellow
  background: yellow + 70%

.error
  @extends .message
  border-color: red
  background: red + 70%

.fatal
  @extends .error
  font-weight: bold
  color: red
=>
.message,
.warning,
.error,
.fatal {
  padding: 10px;
  font: 14px Helvetica;
  border: 1px solid #eee;
}
.warning {
  border-color: #e2e21e;
  background: #f6f6bc;
}
.error,
.fatal {
  border-color: #e33e1e;
  background: #f7c5bc;
}
.fatal {
  font-weight: bold;
  color: #e33e1e;
}

目前Stylus与SASS不同之处在于SASS不允许@extend嵌套选择器。

1
2
3
4
5
6
7
8
9
10
form
  button
    padding: 10px

a.button
  @extend form button
Syntax error: Can't extend form button: can't extend nested selectors
// 解析错误： 无法继承自 button: 不能继承嵌套选择器
        on line 6 of standard input
  Use --trace for backtrace.

Stylus中，只要选择器匹配，就可以生效：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
form
 input[type=text]
   padding: 5px
   border: 1px solid #eee
   color: #ddd

textarea
 @extends form input[type=text]
 padding: 10px
=>
form input[type=text],
form textarea {
  padding: 5px;
  border: 1px solid #eee;
  color: #ddd;
}
textarea {
  padding: 10px;
}

扩展多个选择器

stylus允许一次扩展多个选择器，只需用逗号将其分开：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.a
  color: red

.b
  width: 100px

.c
  @extend .a, .b
  height: 200px
=>
.a,
.c {
  color: #f00;
}
.b,
.c {
  width: 100px;
}
.c {
  height: 200px;
}

请注意，如果选择器未扩展，它将不会出现在生成的CSS中，因此这是创建可扩展代码库的强大方法。 虽然您可以通过mixin插入代码，但是每次使用它们时都会插入相同的代码，而扩展占位符会为您提供紧凑的输出。

可选扩展

有时，根据上下文能够扩展可能存在或不存在的内容这会很有用。 可以通过 ! 后缀任意选择器来实现此目的：

1
2
3
4
5
6
7
8
9
$specialDesign
  color: #FFF

.btn
  @extend .design !optional, $specialDesign !optional
=>
.btn {
  color: #fff;
}