属性声明

与CSS一样,在Sass中,属性声明定义了匹配选择器的元素的样式。但Sass增加了额外的功能,使它们更容易编写和自动化。首先,声明的值可以是任何SassScript表达式,它将被计算并包含在结果中。

插值

属性的名称可以包括插值,这使得根据需要动态生成属性成为可能。您甚至可以插入整个属性名!

嵌套

许多CSS属性都以充当某种名称空间的相同前缀开始。例如,font-familyfont-sizefont-weight都以font-开头。通过嵌套属性声明,Sass使这一过程更加简单,并且减少了冗余。外部属性名被添加到内部属性名,中间用连字符分隔。

一些CSS属性名可作为命名空间,然后嵌套着使用。

隐式声明

有时,您只希望在某些时候显示属性声明。如果一个声明的值为null或一个空的不带引号的字符串,Sass根本不会将该声明编译成CSS。

自定义属性

此段翻译有误,待更正 兼容性(SassScript 语法):Dart Sass ✓|LibSass 3.5.0+ |Ruby Sass 3.5.0+ 旧版本的LibSass和Ruby Sass与任何其他属性声明一样解析自定义属性声明,允许将所有SassScript表达式作为值。即使在使用这些版本时,也建议使用插值函数注入SassScript值以实现向前兼容性。

有关详细信息,请参阅重大改变页面。

CSS自定义属性,也称为CSS变量,有一个不寻常的声明语法:它们几乎允许在声明值中包含任何文本。而且,JavaScript可以访问这些值,因此任何值都可能与用户相关。这包括通常被解析为SassScript的值。

因此,Sass对自定义属性声明的解析与其他属性声明不同。所有标记,包括那些看起来像SassScript的标记,都按原样传递给CSS。唯一的例外是插值,这是将动态值注入自定义属性的唯一方法。

不幸的是,插值从字符串中删除了引号,这使得当引号字符串来自Sass变量时,很难将它们用作自定义属性的值。作为一种解决方案,您可以使用inspect来保存引号。

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