styl类型文件css,CSS 格式的语法

CSS 格式的语法

Stylus 完全支持常规的 CSS 格式的语法，这意味着你无需寻求其它解析器，或指定文件使用特定的样式。

示例

以下代码使用的是缩进格式：

border-radius()

-webkit-border-radius arguments

-moz-border-radius arguments

border-radius arguments

body a

font 12px/1.4 "Lucida Grande", Arial, sans-serif

background black

color #ccc

form input

padding 5px

border 1px solid

border-radius 5px

因为花括号、冒号及分号都是可选的，因此上面的示例我们可以按照普通 CSS 的语法书写：

border-radius() {

-webkit-border-radius: arguments;

-moz-border-radius: arguments;

border-radius: arguments;

}

body a {

font: 12px/1.4 "Lucida Grande", Arial, sans-serif;

background: black;

color: #ccc;

}

form input {

padding: 5px;

border: 1px solid;

border-radius: 5px;

}

虽然 Stylus 不支持 所有 可能的类 CSS 语法，但它可以理解下面这样的代码：

border-radius() {

-webkit-border-radius: arguments;

-moz-border-radius: arguments;

border-radius: arguments;

}

body a

{

font: 12px/1.4 "Lucida Grande", Arial, sans-serif;

background: black;

color: #ccc;

}

form input {

padding: 5px;

border: 1px solid;

border-radius: 5px;

}

由于我们可以混合使用这两种语法格式，因此以下代码也是有效的：

border-radius()

-webkit-border-radius: arguments;

-moz-border-radius: arguments;

border-radius: arguments;

body a {

font: 12px/1.4 "Lucida Grande", Arial, sans-serif;

background: black;

color: #ccc;

}

form input

padding: 5px;

border: 1px solid;

border-radius: 5px;

变量、函数、混合(mixins)，以及 Stylus 提供的所有功能仍然如预期的那样工作：

main-color = white

main-hover-color = black

body a {

color: main-color;

&:hover { color: main-hover-color; }

}

body a { color: main-color; &:hover { color: main-hover-color; }}

这个规则有几个注意事项：由于这两种语法格式可能是混合使用的，所以某些缩进规则仍然会起作用。因此，虽然不是 每个 普通的 CSS 样式表都可以进行零修改，但是这个特性允许那些喜欢 CSS 语法的人继续这样做，同时还能使用 Stylus 的其他强大功能。