财产声明

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

SCSS  语法

.circle {
  $size: 100px;
  width: $size;
  height: $size;
  border-radius: $size / 2;
}

Sass语法

.circle
  $size: 100px
  width: $size
  height: $size
  border-radius: $size / 2

CSS  输出

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

插值固定链接插值

属性的名称可以包含内插，从而可以根据需要动态生成属性。您甚至可以内插整个属性名称！

SCSS  语法

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

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

Sass语法

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

  #{$property}: $value


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

CSS  输出

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

嵌套固定链接嵌套

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

SCSS  语法

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

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

Sass语法

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

  &:hover
    font-size: 36px

CSS  输出

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

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

SCSS  语法

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

Sass语法

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

CSS  输出

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

隐藏的声明永久链接隐藏的声明

有时您只希望某个时间显示属性声明。如果声明的值为null或为空的未加引号的字符串，则Sass根本不会将该声明编译为CSS。

SCSS  语法

$rounded-corners: false;

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

Sass语法

$rounded-corners: false

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

CSS  输出

.button {
  border: 1px solid black;
}

自定义属性永久链接自定义属性

兼容性（SassScript语法）：
Dart·Sass（Dart Sass）
✓
LibSass
从  3.5.0开始
rubySass
从  3.5.0开始

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

有关更多详细信息，请参见重大更改页面。

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

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

SCSS  语法

$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语法

$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  输出

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

Head️抬头！

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

SCSS  语法

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

Sass语法

@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  输出

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