属性声明

在 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

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

  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

许多 CSS 属性以相同的前缀开头，这种前缀类似于一个命名空间。例如，font-family、font-size 和 font-weight 都以 font- 开头。Sass 通过允许属性声明嵌套使这变得更加容易和不那么冗余。外部属性名称会被添加到内部属性名称前，用连字符分隔。

  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 属性中有些有使用命名空间作为属性名的简写版本。对于这些属性，你可以同时编写简写值和更明确的嵌套版本。

  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

有时你只希望属性声明在某些情况下出现。如果声明的值是 null 或空的不带引号的字符串，Sass 根本不会将该声明编译为 CSS。

  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

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

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

更多详情请参见重大变更页面。

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

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

  SCSS

  Sass

  CSS

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

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

  // 尽管这看起来像 Sass 变量，但它是有效的 CSS，所以不会被求值。
  --consumed-by-js: $primary;
}

      
      Playground
    Sass Syntax$primary: #81899b
$accent: #302e24
$warn: #dfa612

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

  // 尽管这看起来像 Sass 变量，但它是有效的 CSS，所以不会被求值。
  --consumed-by-js: $primary

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

⚠️ Heads up!

不幸的是，插值会删除字符串的引号，这使得在自定义属性中使用来自 Sass 变量的带引号字符串变得困难。作为一种变通方法，你可以使用 meta.inspect()函数来保留引号。

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;
}