CSSで置き換えられるSassの5つの機能

Sassを長年使ってきた方なら、その価値はすでにご存知でしょう。変数、ネスト、カラー関数、そしてスタイルシートをよりすっきりと整理する手段などです。しかし、モダンCSSは静かにその差を埋めてきました。かつてはプリプロセッサとビルドステップが必要だった機能の多くが、今ではネイティブで利用でき、十分にサポートされ、本番環境でも使える状態になっています。

これはSassを完全に捨てるべきだという主張ではありません。Sassは依然として、コンパイル時のロジック、ループ、マップ、複雑な関数において優れています。しかし、以下の5つの機能のためだけにSassへの依存を維持しているのであれば、ネイティブCSSがその役割を引き継げる可能性が高いでしょう。

1. CSSカスタムプロパティがSass変数を置き換える

Sass:

$primary: #3498db;
.button { background: $primary; }

ネイティブCSS:

:root { --primary: #3498db; }
.button { background: var(--primary); }

CSSカスタムプロパティはモダンブラウザで広くサポートされており、Sass変数にはできないことを実現します。すなわち、コンパイル時ではなく実行時に解決されるのです。これにより、JavaScriptで更新したり、コンポーネント単位にスコープを限定したり、メディアクエリ内で上書きしたりできます。テーマ設定や動的UIにおいて、$variables よりも高い能力を発揮します。

トレードオフとして、ビルド時にのみ値が存在すればよい場合や、CSSではネイティブに表現できないループや条件分岐に値を渡したい場合には、Sass変数が依然として有用です。

2. ネイティブCSSネストがSassネストを置き換える

Sass:

.card {
  padding: 1rem;
  &:hover { background: #f5f5f5; }
  .card__title { font-size: 1.25rem; }
}

ネイティブCSS:

.card {
  padding: 1rem;
  &:hover { background: #f5f5f5; }
  & .card__title { font-size: 1.25rem; }
}

CSSネストは、現在モダンブラウザで広範にサポートされています。構文はSassとほぼ同じですが、明確さのためにネストされた要素型セレクタやクラスセレクタには & を前置するのがよい習慣です。ネイティブネストはブラウザによってパースされ、内部的に :is() スタイルの詳細度の挙動を使用するため、Sassの完全なクローンではありませんが、ほとんどのコンポーネントレベルのスタイリングでは違いはわずかです。Sassをネストのためだけに使っているなら、これは最も簡単に置き換えられる機能です。

3. color-mix() がSassのカラー関数を置き換える

Sass:

$primary: #3498db;
.button { background: darken($primary, 10%); }

ネイティブCSS:

:root { --primary: #3498db; }
.button { background: color-mix(in srgb, var(--primary) 80%, black); }

color-mix() は現行ブラウザで広くサポートされており、単一のベースカラーから明るい、暗い、ブレンドされたバリエーションを派生させることができます。darken() や lighten() の完全な代替ではありません。これらはHSL空間で明度を調整するのに対し、color-mix() は2色をブレンドします。しかしデザインシステムにおける実用的なほとんどのユースケースでは、同じ役割を果たします。HSLベースの調整により近づけたい場合は、hsl カラースペースでブレンドできます: color-mix(in hsl, var(--primary), black 10%)。

4. @layer が詳細度の回避策を置き換える

Sass開発者はしばしば、詳細度を管理するために複雑なセレクタ構造を書きます。CSS @layer は現在モダンブラウザで広くサポートされており、詳細度のハックなしでカスケード順序を明示的に制御できます:

@layer base, components, utilities;

@layer base { a { color: blue; } }
@layer utilities { .text-red { color: red; } }

ユーティリティは常にベーススタイルに勝ちます。これはセレクタの重みではなく、レイヤー順序によるものです。これは、カスケード管理に関してSassが提供できるどの方法よりもクリーンな解決策です。

5. @property が型付き変数の回避策を置き換える

@property は現行のモダンブラウザでサポートされており、型、初期値、継承の挙動を伴ってカスタムプロパティを登録できます:

@property --hue {
  syntax: '<number>';
  initial-value: 220;
  inherits: false;
}

これにより、カスタムプロパティのアニメーションが可能になり、予期しない継承を防ぐことができます。プレーンなCSSカスタムプロパティだけではできないことです。ブラウザサポートは本記事の他の機能よりも新しいため、本番環境で大きく依存する前にターゲットブラウザを確認してください。

Sassが依然として優れている点

ネイティブCSSには、@each、@for、@if、または複雑な @function ロジックに相当するものはありません。Sassでユーティリティクラスを生成したり、スペーシングスケールをプログラム的に構築したり、条件付き出力を含めている場合は、Sassを残しましょう。また、Sassの@import は非推奨になっていることに注意してください。代わりに @use と @forward のモジュールシステムを使用してください。

まとめ

変数、ネスト、カラー操作、カスケード制御、型付きプロパティについては、モダンCSSは多くの日常的なスタイリングタスクで十分になりました。実際にSassを何のために使っているかを見直してみてください。ビルドステップが解決している問題が以前より少なくなっていることに気づくかもしれません。Sassはプログラム的なロジックではまだその地位を保っていますが、日常的なスタイリングの懸念事項については、ネイティブCSSがそのギャップを埋めました。

よくある質問

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..