Stylus其他 @-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;
}
}

未知的 at-rules

Stylus支持任何未知的@ -rules,因此它具有未来友好性,因为CSS中的任何新规则都可以用基于缩进的Stylus语法编写,并且可以完美呈现:

@foo
@bar
width: 10px

.baz
height: 10px

这将编译为:

@foo {
@bar {
width: 10px;
.baz {
height: 10px;
}
}
}