功能觀察：內容引數和顏色函式

Dart Sass 1.15 今日發佈，可透過 npm 和 所有其他發佈管道 取得。此版本帶來許多備受期待的 Sass 新功能。這也是 Dart Sass 第一個發佈的版本，其中包含主要的新語言功能，而這些功能*不僅僅*是為了與 CSS 相容。這是一項重大成就，我們打算繼續朝這個方向發展！

@content 引數`@content` 引數的永久連結

接受 @content 區塊 的 Mixin 現在可以將引數傳遞給這些區塊。寫法為 @content(<arguments...>)。如果 Mixin 將引數傳遞給其內容區塊，則該 Mixin 的使用者必須透過 @include <name> using (<arguments...>) 接受這些引數。內容區塊的引數列表就像 Mixin 的引數列表一樣，而 @content 傳遞給它的引數也就像傳遞引數給 Mixin 一樣。

// style.scss
@mixin media($types...) {
  @each $type in $types {
    @media #{$type} {
      @content($type);
    }
  }
}

@include media(screen, print) using ($type) {
  h1 {
    font-size: 40px;
    @if $type == print {
      font-family: Calluna;
    }
  }
}

/* style.css */
@media screen {
  h1 {
    font-size: 40px;
  }
}
@media print {
  h1 {
    font-size: 40px;
    font-family: Calluna;
  }
}

更多詳細資訊，請參閱功能提案。此功能已在 LibSass 中實作，並將於 3.6.0 版中發佈。由於 Ruby Sass 已被棄用，而且這不是 CSS 相容性功能，因此它不會在 Ruby Sass 中實作。

rgb() 和 hsl() 的色彩等級 4 語法rgb() 和 hsl() 色彩等級 4 語法的永久連結

CSS 色彩模組等級 4 引入了 rgb() 和 hsl() 函式的新語法，瀏覽器已開始支援此語法。此語法使這些函式更簡潔，允許指定 alpha 值而無需額外的 rgba() 和 hsla() 函式，看起來像 rgb(0 255 0 / 0.5) 和 hsla(0 100% 50%)。

為了支援此函式，Sass 的 rgb() 和 hsl() 函式現在接受以空格分隔的組件列表作為單一引數。如果最後一個引數是以斜線分隔的兩個數字，則第一個數字將被視為藍色通道或亮度（分別），第二個數字將被視為 alpha 通道。

但請注意，區分除法和 / 作為分隔符號的正常規則 仍然適用！因此，如果您想將變數傳遞給 alpha 值，則需要使用舊的 rgba() 語法。由於 / 在 CSS 中更常被用作分隔符號，我們正在 考慮此問題的可能的長期解決方案。

此外，新的色彩規範將 rgba() 和 hsla() 函式定義為 rgb() 和 hsl() 的純別名，並將對四個引數的 rgba() 和 hsla() 語法的支援新增到 rgb() 和 hsl()。為了符合此行為，Sass 也將 rgba() 和 hsla() 定義為別名，並將其所有定義的支援新增到 rgb() 和 hsl()。

總而言之，這表示 Sass 現在支援以下所有函式呼叫：

• rgb(0 255 0)、rgb(0% 100% 0%)、rgb(0 255 0 / 0.5) 和 rgb(0, 255, 0, 0.5)；
• hsl(0 100% 50%)、hsl(0 100% 50% / 0.5) 和 hsl(0, 100%, 50%, 0.5)；
• rgba(0, 255, 0) 和 hsla(0, 100%, 50%)；
• 以及 rgb($color, 0.5)。

這個變更完全向下相容，因此先前所有適用於 rgb()、hsl()、rgba() 和 hsla() 的參數將繼續有效。

更多詳細資訊，請參閱功能提案。此功能尚未在 LibSass 或 Ruby Sass 中實作。

插入 At-Rule 名稱插入 At-Rule 名稱永久連結

這個功能比前兩個小一點，但它在待辦事項清單上的時間更長：在 at-rule 的名稱中新增插值支援！它的運作方式與您預期的一樣

@mixin viewport($prefixes) {
  @each $prefix in $prefixes {
    @-#{$prefix}-viewport {
      @content;
    }
  }
  @viewport {
    @content;
  }
}

更多詳細資訊，請參閱功能提案。此功能尚未在 LibSass 中實作。由於 Ruby Sass 已棄用，且這不是 CSS 相容性功能，因此它不會在 Ruby Sass 中實作。