機能ウォッチ：コンテンツ引数とカラー関数

本日リリースされ、npm および 他のすべての配布チャネル で利用可能な Dart Sass 1.15 には、待望の Sass の新機能が多数搭載されています。これはまた、CSS の互換性のためだけではない主要な新しい言語機能を備えた Dart Sass の最初のリリースです。これは大きな成果であり、今後もこのパターンを継続していく予定です！

@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() の Color Level 4 構文rgb() および hsl() の Color Level 4 構文 パーマリンク

CSS Color Module Level 4 は、rgb() および hsl() 関数の新しい構文を導入しました。これはブラウザでサポートされ始めています。この構文により、これらの関数はよりコンパクトになり、追加の rgba() および hsla() 関数を必要とせずにアルファ値を指定できるようになり、rgb(0 255 0 / 0.5) や hsla(0 100% 50%) のようになります。

この関数をサポートするために、Sass の rgb() および hsl() 関数は、スペース区切りのコンポーネントリストを単一の引数として受け入れるようになりました。この最後の引数がスラッシュで区切られた数値のペアの場合、最初の数値は青チャネルまたは明度（それぞれ）として扱われ、2番目の数値はアルファチャネルとして扱われます。

ただし、注意してください。 除算と区切り文字としての / を区別するための通常のルール は引き続き適用されます！したがって、アルファ値に変数を渡したい場合は、古い rgba() 構文を使用する必要があります。CSS で区切り文字として / がより顕著に使用されているため、この問題の長期的な解決策を検討 しています。

さらに、新しいカラー仕様では、rgba() および hsla() 関数を rgb() および hsl() の純粋なエイリアスとして定義し、4 つの引数を持つ 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 に実装されていません。

補間されたアットルール名補間されたアットルール名 パーマリンク

この機能は最後の2つよりも少し小さいですが、さらに長い間to-doリストに載っていました。アットルールの名前に補間のサポートを追加します！これは期待どおりの動作をします。

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

詳細については、機能提案 を参照してください。この機能はまだ LibSass に実装されていません。Ruby Sass は非推奨 であり、これは CSS 互換性機能ではないため、Ruby Sass には実装されません。