sass-@规则

@规则有七种,最常见的是

1
2
3
@import`fileName.sass|scss`

@extend`.className`

这里详细讲述其他五种。

1
1.@media

If a @media directive appears within a CSS rule, it will be bubbled up to the top level of the stylesheet, putting all the selectors on the way inside the rule. This makes it easy to add media-specific styles without having to repeat selectors or break the flow of the stylesheet.

简单来说:如果@media在css的样式中出现,它将冒泡到样式的最顶层,让所有的选择器都在它的内部。

For example:

1
2
3
4
5
6
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}

编译出来

1
2
3
4
5
.sidebar {
width: 300px; }
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }