属性声明

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

scss 语法	css 语法
.circle { `$size`: 100px; width: `$size`; height: `$size`; border-radius: `$size` * 0.5; }	.circle { width: 100px; height: 100px; border-radius: 50px; }

插值

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

scss 语法	css 语法
@mixin prefix(`$property`, $value, $prefixes) { @each `$prefix` in $prefixes { -#{`$prefix`}-#{`$property`}: $value; } #{`$property`}: $value; } .gray { @include prefix(filter, grayscale(50%), moz webkit); }	.gray { -moz-filter: grayscale(50%); -webkit-filter: grayscale(50%); filter: grayscale(50%); }

scss 语法

css 语法

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

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

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

嵌套

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

scss 语法	css 语法
.enlarge { font-size: 14px; transition: { `property`: font-size; `duration`: 4s; `delay`: 2s; } &:hover { font-size: 36px; } }	.enlarge { font-size: 14px; transition-property: font-size; transition-duration: 4s; transition-delay: 2s; } .enlarge:hover { font-size: 36px; }

scss 语法

css 语法

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

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

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

隐藏声明

有时您只希望在某些时候出现属性声明。如果一个声明的值是 null 或一个空的未加引号的字符串，Sass 根本不会将该声明编译成 CSS。

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

自定义属性

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

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

scss 语法	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`; }	:root { --primary: #81899b; --accent: #302e24; --warn: #dfa612; --consumed-by-js: `$primary`; }

scss 语法

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

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

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

scss 语法	css 语法
@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)}; }	:root { --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto; --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas; }

scss 语法

css 语法

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

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