属性声明

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

  SCSS

  Sass

  CSS

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

      
      Playground
    Sass Syntax.circle
  $size: 100px
  width: $size
  height: $size
  border-radius: $size * 0.5

CSS Output.circle {
  width: 100px;
  height: 100px;
  border-radius: 50px;
}

插值插值 permalink

¥Interpolation

属性的名称可以包含插值法，这样就可以根据需要动态生成属性。你甚至可以插入整个属性名称！

¥A property’s name can include interpolation, which makes it possible to dynamically generate properties as needed. You can even interpolate the entire property name!

  SCSS

  Sass

  CSS

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

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

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

  #{$property}: $value


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

CSS Output.gray {
  -moz-filter: grayscale(50%);
  -webkit-filter: grayscale(50%);
  filter: grayscale(50%);
}

嵌套嵌套 permalink

¥Nesting

许多 CSS 属性都以相同的前缀开头，充当一种命名空间。例如，font-family、font-size、font-weight 均以 font- 开头。Sass 通过允许嵌套属性声明，使这变得更容易且更少冗余。外部属性名称添加到内部属性名称，并用连字符分隔。

¥Many CSS properties start with the same prefix that acts as a kind of namespace. For example, font-family, font-size, and font-weight all start with font-. Sass makes this easier and less redundant by allowing property declarations to be nested. The outer property names are added to the inner, separated by a hyphen.

  SCSS

  Sass

  CSS

      
      Playground
    SCSS Syntax.enlarge {
  font-size: 14px;
  transition: {
    property: font-size;
    duration: 4s;
    delay: 2s;
  }

  &:hover { font-size: 36px; }
}

      
      Playground
    Sass Syntax.enlarge
  font-size: 14px
  transition:
    property: font-size
    duration: 4s
    delay: 2s

  &:hover
    font-size: 36px

CSS Output.enlarge {
  font-size: 14px;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}
.enlarge:hover {
  font-size: 36px;
}

其中一些 CSS 属性具有使用命名空间作为属性名称的简写版本。对于这些，你可以编写简写值和更明确的嵌套版本。

¥Some of these CSS properties have shorthand versions that use the namespace as the property name. For these, you can write both the shorthand value and the more explicit nested versions.

  SCSS

  Sass

  CSS

      
      Playground
    SCSS Syntax.info-page {
  margin: auto {
    bottom: 10px;
    top: 2px;
  }
}

      
      Playground
    Sass Syntax.info-page
  margin: auto
    bottom: 10px
    top: 2px


CSS Output.info-page {
  margin: auto;
  margin-bottom: 10px;
  margin-top: 2px;
}

隐藏声明隐藏声明 permalink

¥Hidden Declarations

有时你只想在某些时候显示属性声明。如果声明的值为 null 或空不带引号的字符串，Sass 根本不会将该声明编译为 CSS。

¥Sometimes you only want a property declaration to show up some of the time. If a declaration’s value is null or an empty unquoted string, Sass won’t compile that declaration to CSS at all.

  SCSS

  Sass

  CSS

      
      Playground
    SCSS Syntax$rounded-corners: false;

.button {
  border: 1px solid black;
  border-radius: if($rounded-corners, 5px, null);
}

      
      Playground
    Sass Syntax$rounded-corners: false

.button
  border: 1px solid black
  border-radius: if($rounded-corners, 5px, null)

CSS Output.button {
  border: 1px solid black;
}

自定义属性自定义属性 permalink

¥Custom Properties

Dart Sass: ✓
LibSass: since 3.5.0
Ruby Sass: since 3.5.0

旧版本的 LibSass 和 Ruby Sass 解析自定义属性声明就像任何其他属性声明一样，允许将所有 SassScript 表达式作为值。即使使用这些版本，也建议你使用插值来注入 SassScript 值以实现向前兼容性。

¥Older versions of LibSass and Ruby Sass parsed custom property declarations just like any other property declaration, allowing the full range of SassScript expressions as values. Even when using these versions, it’s recommended that you use interpolation to inject SassScript values for forwards-compatibility.

详细信息请参见重大变更页面。

¥See the breaking change page for more details.

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

¥CSS custom properties, also known as CSS variables, have an unusual declaration syntax: they allow almost any text at all in their declaration values. What’s more, those values are accessible to JavaScript, so any value might potentially be relevant to the user. This includes values that would normally be parsed as SassScript.

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

¥Because of this, Sass parses custom property declarations differently than other property declarations. All tokens, including those that look like SassScript, are passed through to CSS as-is. The only exception is interpolation, which is the only way to inject dynamic values into a custom property.

  SCSS

  Sass

  CSS

      
      Playground
    SCSS Syntax$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;
}

      
      Playground
    Sass Syntax$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

CSS Output:root {
  --primary: #81899b;
  --accent: #302e24;
  --warn: #dfa612;
  --consumed-by-js: $primary;
}

⚠️ Heads up!

不幸的是，插值法删除了字符串中的引号，这使得当自定义属性来自 Sass 变量时很难使用带引号的字符串作为自定义属性的值。作为解决方法，你可以使用 meta.inspect() 函数来保留引号。

¥Unfortunately, interpolation removes quotes from strings, which makes it difficult to use quoted strings as values for custom properties when they come from Sass variables. As a workaround, you can use the meta.inspect() function to preserve the quotes.

  SCSS

  Sass

  CSS

      
      Playground
    SCSS Syntax@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)};
}

      
      Playground
    Sass Syntax@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)}

CSS Output:root {
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas;
}