CSS 原生@规则

兼容性:Dart Sass 1.15.0+ |LibSass ✗|Ruby Sass ✗

LibSass、Ruby Sass和旧版本Dart Sass在不支持@规则名称的插值。在值中使用插值是支持的。

Sass支持全部的CSS的@规则。为了保持灵活性和向前兼容CSS的未来版本,Sass在默认情况下提供了几乎涵盖所有@规则的通用支持。CSS的@规则的书写格式为@<name> <value>, @<name> { ... },或@<name> <value> { ... },名称必须是标识符,而值(如果存在的话)几乎可以是任何值。名称和值都可以包含插值表达式

如果CSS @规则嵌套在样式规则中,那么这两个位置将自动交换,在CSS输出结果中@规则位于顶层,样式规则在@规则中。这使得添加条件样式很容易,而不必重写样式规则的选择器。

@media

兼容性:Dart Sass 1.11.0+ |LibSass ✗|Ruby Sass 3.1.0+

LibSass和老版本的Dart Sass和Ruby Sass不支持range context特性的媒体查询。它们支持其他标准的媒体查询。

@media规则完成了以上所有工作,甚至更多。除了允许插值之外,它还允许SassScript表达式直接用于特性查询

如果可能,Sass还将合并彼此嵌套的媒体查询,以便更容易地支持还不支持嵌套@media规则的浏览器。

@supports

@supports规则还允许在声明查询中使用[SassScript表达式]((api/Syntax/Structure.html#表达式)。

@keyframes

@keyframes规则的工作原理与一般@规则类似,只是它的子规则必须是有效的keyframe规则(<number>%, from, or to),而不是普通的选择器。

上次更新: 2019-11-5 4:49:11 PM