在 Sass 中和在 CSS 中一样，属性声明定义了如何设置与选择器匹配的元素的样式。 但是 Sass 添加了额外的特性，使它们更容易编写和自动化。 首先，声明的值可以是任何 SassScript 表达式，它将被计算并包含在结果中。
.circle {
$size: 100px;
width: $size;
height: $size;
border-radius: $size * 0.5;
}
插值 Interpolation
属性名称可以包含 插值，这样可以根据需要动态生成属性。您甚至可以插入整个属性名称！
@mixin prefix($property, $value, $prefixes) {
@each $prefix in $prefixes {
-#{$prefix}-#{$property}: $value;
}
#{$property}: $value;
}
.gray {
@include prefix(filter, grayscale(50%), moz webkit);
}
嵌套 Nesting
许多 CSS 属性都以相同的前缀开头，充当一种命名空间。例如，“font-family”、“font-size”和“font-weight”都以“font-”开头。Sass 通过允许嵌套属性声明使此操作更容易且冗余度更低。外部属性名称添加到内部，用连字符分隔。
.enlarge {
font-size: 14px;
transition: {
property: font-size;
duration: 4s;
delay: 2s;
}
&:hover { font-size: 36px; }
}
其中一些 CSS 属性具有使用命名空间作为属性名称的简写版本。对于这些属性，您可以同时编写简写值和更明确的嵌套版本。
.info-page {
margin: auto {
bottom: 10px;
top: 2px;
}
}
有时您只希望属性声明在某些时候显示。如果声明的值为 null 或为空的 未加引号的字符串，Sass 根本不会将该声明编译为 CSS。
$rounded-corners: false;
.button {
border: 1px solid black;
border-radius: if($rounded-corners, 5px, null);
}
自定义属性
LibSass 和 Ruby Sass 的旧版本解析自定义属性声明就像解析任何其他属性声明一样，允许将各种 SassScript 表达式作为值。即使使用这些版本，也建议您使用插值来注入 SassScript 值以实现前向兼容性。
有关更多详细信息，请参阅重大变更页面。
CSS 自定义属性，也称为 CSS 变量，具有不寻常的声明语法：它们允许在声明值中使用几乎任何文本。更重要的是，这些值可供 JavaScript 访问，因此任何值都可能与用户相关。这包括通常解析为 SassScript 的值。
因此，Sass 解析自定义属性声明的方式与其他属性声明不同。所有标记（包括看起来像 SassScript 的标记）都按原样传递给 CSS。唯一的例外是 interpolation，这是将动态值注入自定义属性的唯一方法。
$primary: #81899b;
$accent: #302e24;
$warn: #dfa612;
:root {
--primary: #{$primary};
--accent: #{$accent};
--warn: #{$warn};
// 尽管这看起来像一个 Sass 变量，但它是有效的 CSS，因此不会被评估。
--consumed-by-js: $primary;
}
遗憾的是，interpolation 会从字符串中删除引号，因此当引号字符串来自 Sass 变量时，很难将其用作自定义属性的值。作为一种解决方法，您可以使用 meta.inspect() 函数 来保留引号。
@use "sass:meta";
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;
:root {
--font-family-sans-serif: #{meta.inspect($font-family-sans-serif)};
--font-family-monospace: #{meta.inspect($font-family-monospace)};
}