中文
其他 @-rules
Stylus支持大多数的CSS @规则, 如 @viewport
, @page
, @host
, @supports
以及其他@规则,在Stylus中使用@规则可以省略花括号({}
):
@viewport
color: #00f
@supports (display: flex)
div
display: flex
@page :blank
@top-center
content: none
@viewport
color: #00f
@supports (display: flex)
div
display: flex
@page :blank
@top-center
content: none
这将编译为:
@viewport {
color: #00f;
}
@supports (display: flex) {
div {
display: flex;
}
}
@page :blank {
@top-center {
content: none;
}
}
@viewport {
color: #00f;
}
@supports (display: flex) {
div {
display: flex;
}
}
@page :blank {
@top-center {
content: none;
}
}
未知的 at-rules
Stylus支持任何未知的 @-rules
,因此它具有未来友好性,因为CSS中的任何新规则都可以用基于缩进的Stylus语法编写,并且可以完美呈现:
@foo
@bar
width: 10px
.baz
height: 10px
@foo
@bar
width: 10px
.baz
height: 10px
Would be compiled to
@foo {
@bar {
width: 10px;
.baz {
height: 10px;
}
}
}
@foo {
@bar {
width: 10px;
.baz {
height: 10px;
}
}
}