# Sass支持CSS的 @ 语句
Sass 支持所有 CSS 中的 @ 语句,为了保持灵活和向前兼容 CSS 的未来版本,Sass 提供了所有的支持,默认情况下涵盖了几乎所有 @ 语句的规则。
@charset
定义样式表使用的字符集@import 引入一个外部样式表
@namespace 告诉CSS引擎,它的所有内容都必须以XML名称空间作为前缀。
@media 限定媒体查询的样式规则
@supports 浏览器支持查询
@document 遗弃
@page 描述打印文档时布局的变化
@font-face 描述将下载的外部的字体
@keyframes 描述 CSS 动画的中间步骤
@viewport 遗弃
@counter-style 自定义记数器,用于
<ol>
,<li>
元素的记数@font-feature-values 允许作者在 font-variant-alternates 中使用通用名称,用于在OpenType中以不同方式激活功能。
@property 提案,描述自定义属性和变量。
CSS 的 @ 语句可能是 @<name> <value>
, @<name> { ... }
,或是 @<name> <value>{ ... }
。<name>
必须是一个标识符,如果存在 <value>
,那么它可以是任何东西。<name>
和 <value>
都可以包含插值表达式。
@namespace svg url(http://www.w3.org/2000/svg);
@font-face {
font-family: "Open Sans";
src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2");
}
@counter-style thumbs {
system: cyclic;
symbols: "\1F44D";
}
2
3
4
5
6
7
8
9
10
11
如果一个CSS at-rule嵌套在一个样式规则中,两者会自动交换位置,使at-rule位于CSS输出的顶层,而样式规则在其中。这使得添加条件样式变得很容易,而不必重写样式规则的选择器。
.print-only {
display: none;
@media print { display: block; }
}
2
3
4
5
编译后的 css :
.print-only {
display: none;
}
@media print {
.print-only {
display: block;
}
}
2
3
4
5
6
7
8
9
@ 语句支持使用表达式:
$layout-breakpoint-small: 960px;
@media (min-width: $layout-breakpoint-small) {
.hide-extra-small {
display: none;
}
}
2
3
4
5
6
7
编译后的 css :
@media (min-width: 960px) {
.hide-extra-small {
display: none;
}
}
2
3
4
5
如果可能的话,Sass 还将合并嵌套在一起的媒体查询,以便更容易支持还不支持嵌套@media规则的浏览器。
@media (hover: hover) {
.button:hover {
border: 2px solid #000;
@media (color) {
border-color: #036;
}
}
}
2
3
4
5
6
7
8
9
编译后的 css :
@media (hover: hover) {
.button:hover {
border: 2px solid #000;
}
}
@media (hover: hover) and (color) {
.button:hover {
border-color: #036;
}
}
2
3
4
5
6
7
8
9
10
11