Lzh on GitHub

属性声明

在 Sass 中，就像在 CSS 中一样，属性声明定义了匹配选择器的元素的样式。但 Sass 添加了额外的功能，使它们更容易编写和自动化。首先也是最重要的一点是，声明的值可以是任何 SassScript 表达式，该表达式将被求值并包含在结果中。

在 Sass 中，就像在 CSS 中一样，属性声明定义了匹配选择器的元素的样式。但 Sass 添加了额外的功能，使它们更容易编写和自动化。首先也是最重要的一点是，声明的值可以是任何 SassScript 表达式，该表达式将被求值并包含在结果中。

.circle {
  $size: 100px;
  width: $size;
  height: $size;
  border-radius: $size * 0.5;
}

插值

属性名可以包含插值，这使得可以根据需要动态生成属性。你甚至可以对整个属性名进行插值！

@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}

.gray {
  @include prefix(filter, grayscale(50%), moz webkit);
}

嵌套

许多 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);
}

自定义属性

CSS 自定义属性，也称为 CSS 变量，具有不寻常的声明语法：它们的声明值允许几乎任何文本。更重要的是，这些值可以被 JavaScript 访问，因此任何值都可能与用户相关。这包括通常会被解析为 SassScript 的值。

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

$primary: #81899b;
$accent: #302e24;
$warn: #dfa612;

:root {
  --primary: #{$primary};
  --accent: #{$accent};
  --warn: #{$warn};

  // Even though this looks like a Sass variable, it's valid CSS so it's not
  // evaluated.
  --consumed-by-js: $primary;
}
不幸的是，插值会从字符串中删除引号，这使得当带引号的字符串来自 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)};
}