屬性宣告

在 Sass 和 CSS 中，屬性宣告定義了符合選擇器的元素的樣式。但 Sass 添加了額外的功能，使其更容易編寫和自動化。首先，宣告的值可以是任何 SassScript 運算式，它將被評估並包含在結果中。

  SCSS

  Sass

  CSS

       程式碼遊樂場SCSS 語法.circle {
  $size: 100px;
  width: $size;
  height: $size;
  border-radius: $size * 0.5;
}

       程式碼遊樂場Sass 語法.circle
  $size: 100px
  width: $size
  height: $size
  border-radius: $size * 0.5

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

插值插值永久連結

屬性的名稱可以包含插值，這使得根據需要動態生成屬性成為可能。您甚至可以插值整個屬性名稱！

  SCSS

  Sass

  CSS

       程式碼遊樂場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

  Sass

  CSS

       程式碼遊樂場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

  Sass

  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

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

自訂屬性自訂屬性永久連結

Dart Sass: ✓
LibSass: 自 3.5.0 版本起
Ruby Sass: 自 3.5.0 版本起

舊版的 LibSass 和 Ruby Sass 會像解析任何其他屬性宣告一樣解析自訂屬性宣告，允許在值中使用所有 SassScript 運算式。即使使用這些版本，也建議您使用插值來插入 SassScript 值，以確保向前相容性。

詳情請參閱重大變更頁面。

CSS 自訂屬性，也稱為 CSS 變數，具有不尋常的宣告語法：它們幾乎允許在其宣告值中使用任何文字。此外，JavaScript 可以存取這些值，因此任何值都可能與使用者相關。這包括通常會被解析為 SassScript 的值。

因此，Sass 解析自訂屬性宣告的方式與解析其他屬性宣告的方式不同。所有標記（包括看起來像 SassScript 的標記）都會按原樣傳遞到 CSS。唯一的例外是插值，這是將動態值插入自訂屬性的唯一方法。

  SCSS

  Sass

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

⚠️ 注意！

遺憾的是，插值會移除字串的引號，這使得當自訂屬性的值來自 Sass 變數時，難以使用加引號的字串。作為因應措施，您可以使用 meta.inspect() 函式來保留引號。

SCSS

Sass

CSS

     程式碼遊樂場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;
}