属性声明

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

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

.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!

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

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

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

嵌套嵌套 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.

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

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

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

其中一些 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.

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

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

.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.

$rounded-corners: false;

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

$rounded-corners: false

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

.button {
  border: 1px solid black;
}

自定义属性自定义属性 permalink

¥Custom Properties

兼容性 (SassScript Syntax):

Dart Sass

✓

LibSass

since 3.5.0

Ruby Sass

since 3.5.0

➤

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.

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

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

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

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