Stylus @extend

🌙
手机阅读
本文目录结构

继承

Stylus的@extend指令受 SASS 的启发,基本一致,除了些轻微差异。此功能大大简化了继承其他语义规则集的语义规则集的维护。

混合书写下的“继承”

尽管你可以使用混写实现类似效果,但会导致重复的CSS. 典型的模式式定义如下的几个类名,然后归结到一个元素中,例如"warning message".

该技术实现是没什么问题,但是维护就比较麻烦了。

message,
.warning {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  color: #E2E21E;
}

使用__@extend__

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

.message {
  padding: 10px;
  border: 1px solid #eee;
}

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

这儿是个更复杂的例子,演示了__@extend__如何级联。

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

生成CSS如下:

.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__嵌套选择器。

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中,只要选择器匹配,就可以生效:

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;
}

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了