そろそろSassとはさよなら、Sassの便利な機能がネイティブのCSSでどんどん使用できるようになっています
Post on:2024年4月2日
sponsors
2024年になり、CSSは急速な進化を遂げています。中でもワークフローにも影響を大きく与えるのが、Sassに代わる新機能の数々です。
ネイティブのCSSで変数を扱えるようになり、ネストや:is()疑似クラスや:has()疑似クラスやコンテナクエリ、そしてカスケードレイヤーなどの新機能がモダンブラウザのすべてにサポートされました。これらの機能がSassに代わるものなのか、Sassはまだ必要なのか、を紹介します。
Goodbye SASS , welcome back native CSS
by Karsten Biedermann
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
Sassはローカル環境にインストールされる強力なプリプロセッサとしての地位を確立し、10年以上に渡り、わたし達のプロジェクトを支えました。Sassのおかげで、スケーラブルで安定したCSSを効率的にまとめることができました。
現在でも、Sassは非常に強力なツールであると私は思っています。しかし、2024年になり、CSSが急速な進化を遂げていることは否定できません。変数やネストなど、Sass独自の機能だったものが、現在ではネイティブのCSSで使用できるようになりました。
CSSの変数
CSSにおける変数の定義は、多くのプロパティを一元管理できるSCSSの独自の強みであり、長い間CSSに欠けていた機能でした。しかし現在では、CSSでもSassと同じ方法で変数を定義できるようになりました。
ただし、違いもあります。Sassの変数はプリプロセッサのコンテキスト内にのみ存在するのに対して、CSSの変数はブラウザで使用でき、JavaScript経由で動的に上書きすることもできることです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
:root { --button-padding: 10px 20px; --button-bg-color: #007bff; --button-text-color: #ffffff; --button-border-radius: 8px; } .button { padding: var(--button-padding); background-color: var(--button-bg-color); color: var(--button-text-color); border-radius: var(--button-border-radius); border: none; cursor: pointer; transition: background-color 0.3s; } |
CSSの変数について詳しくは、下記をご覧ください。
CSSのネスト
ある要素のスタイルルールを別の要素で定義する機能は、CSSの記述を大幅に簡素化します。下位要素や疑似セレクタに同じセレクタを繰り返し使用する代わりに、入れ子（ネスト）にすることで、親セレクタ内でこれらのセレクタをグループ化することができます。この機能により、明確で階層構造化された、より効率的なコードが実現します。
CSSのネストはすでに主要ブラウザのすべてにサポートされており、グローバルでの使用率も84%を超えています（参考: Can I Use）。CSSのネストはますます利用しやすい環境になっていると言えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.blog { position: relative; padding: 1rem; background: var(--neutral-100); .blog-item { border: 1px solid var(--neutral-200); & span { font-size: 1rem; } } } |
CSSのネストについて詳しくは、下記をご覧ください。
:is()疑似クラス
CSSの:is()疑似クラスは、セレクタのリストを受け取り、これらのセレクタのいずれかに一致するすべての要素にスタイルできることで、セレクタの概念に革命をもたらしました。:is()疑似クラスにより、DOM内の要素の選択とスタイル設定が非常に簡単になりました。
|
1 2 3 |
:is(selector1, selector2, selector3) { /* styles */ } |
セレクタで長い記述をする代わりに:is()疑似クラスを使用すると、長いセレクタを避けながら可読性を向上されることができます。
CSSの:is()疑似クラスについて詳しくは、下記をご覧ください。
:has()疑似クラス
CSSの:has()疑似クラスは、条件付きスタイルの適用と同様に、子孫に基づいて要素を選択する強力な機能を提供します。
|
1 2 3 |
.hero:has(.hero-button) { background-color: var(--accent-50); } |
CSSの:has()疑似クラスについて詳しくは、下記をご覧ください。
コンテナクエリ
CSSのコンテナクエリは、CSS3以降のWebデザインにおけるもっとも重要な革新と考えられています。コンテナクエリは、コンテナのサイズに基づいて要素を調整できるようになる機能で、レスポンシブデザインのコンセプトを拡張しました。この機能により、コンテキストに応じて要素のデザインを動的に変更できるようになり、より柔軟で適応性のあるデザインが実現します。
|
1 2 3 4 5 6 7 8 9 10 |
.component { --theme: dark; container-name: fancy; } @container fancy style(--theme: dark) { .fancy { /* dark styles. */ } } |
コンテナに--theme: dark変数がある場合、次のCSSを加えます。
|
1 2 3 4 5 |
@container (min-width: 720px) { .headline { font-size: 2em; } } |
CSSのコンテナクエリについて詳しくは、下記をご覧ください。
カスケードレイヤー
CSSのカスケードレイヤーを使用すると、独自のレイヤーを割り当てることで、クラスやIDなどの入れ子を回避して、より高い詳細度を持たせることができます。@layerとレイヤー化された@importsを使用すると、リセットやデフォルトなどの詳細度が低いスタイルから、テーマ・フレームワーク・デザインシステムを経て、コンポーネント・ユーティリティなどの詳細度が高いスタイルまで、レイヤーを構築することができます。カスケードレイヤーにより、より詳細な制御が可能になります。
|
1 2 3 4 5 6 7 8 9 |
@layer utilities { .button { padding: 0.5rem; } .button--lg { padding: 0.8rem; } } |
CSSのカスケードレイヤーについて詳しくは、下記をご覧ください。
Sassの未来
これらは、Sassが時代遅れになったということでしょうか？
いいえ、そうではありません。Mixinsやpxをremに変換する機能などはSassのかけがえのない利点です。とはいえ、私はほとんどのプロジェクトでSassを使用しないことにしました。代わりに、エディタで定義済みのコードブロックやパッケージを使用し、ワークフローが大幅に改善されました。
Sassよ、さよなら
2024年になり、インストール方法や使用方法、コンパイルの問題を含め、Sassの利点はその使用を正当化できなくなると私は思います。モダンCSSの拡張性と使いやすさは、追加のツールなしで作業をすることが可能になりました。
私のプロジェクトthemex appでは、は、CSSの新機能の組み合わせがいかに強力かを実証しています。
CSSの進化により、小さなプロジェクトから大きなプロジェクトまで、直接的かつストレートに実装できることを楽しみにしています。
Sassよ、さよなら、そしてありがとう！
sponsors
