コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > CSS > CSSのネストがネイティブになった今、Sassはまだ使うべきか？Sassを使うメリットとデメリット

CSSのネストがネイティブになった今、Sassはまだ使うべきか？Sassを使うメリットとデメリット

CSS Sass

Do You Still Need Sass?

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

2006年にSassがリリースされて以来、ネイティブCSSは長い道のりを歩んできました。Sassを置き去りにするほど十分に進化したのでしょうか？

Sassは長年、フロントエンド開発の定番でした。最初から、CSSに機能を追加し、開発者体験を向上させ、フロントエンドコードをより保守しやすくするのに役立ちました。

しかし、まだ必要なのでしょうか？2006年にSassがリリースされて以来、ネイティブCSSは長い道のりを歩んできました。

2024年のネイティブCSSは何ができるのか？

現代のWeb開発に不可欠な多くの機能をSassに頼ってきましたが、ネイティブCSSができることをいくつか見てみましょう。

カスタムプロパティ（またはCSSカスタム変数）

カスタムプロパティは2016年から存在し、Sass変数の代わりに使用できます。変数を設定して使用する機能は、人々がSassを使用する大きな理由の1つであり、現在ではCSSに組み込まれています。

:root {
   --text-color: #333;
   --background-color: teal;
 }

.container {
  border: solid 2px var(--text-color);
  background-color: var(--background-color);
}

これらはSass変数のようにCSSにコンパイルされないため、JavaScriptでオンザフライで変更できます。

const btn = document.querySelector('button');
const pageStyles = getComputedStyle(document.documentElement);

btn.addEventListener("click", toggleBackground);

function toggleBackground(event) {

  const currentBackground = pageStyles.getPropertyValue('--background-color');

  if (currentBackground === 'teal') {
    document.documentElement.style
    .setProperty('--background-color', 'pink');
  }

  else {
    document.documentElement.style
    .setProperty('--background-color', 'teal');
  }
}

ただし、メディアクエリでは使用できません。これに対する回避策は後で説明します。

ネイティブCSSでの計算

calc()は以前からありましたが、2023年以降、三角関数を使用できるようになりました。sin()、cos()、tan()などです。これらを使用して、CSSのみで時計を作成できます。Sassでは常にこれが可能でした。

カラー関数

color-mix()はすべての主要ブラウザでサポートされており、Sassのmix()関数の代わりに使用できます。カラーミキシングを使用して、色を明るくしたり、暗くしたり、色合いを変えたり、シェードを付けたりできます。Sassの関数は1つのパーセンテージ値しか取りませんが、color-mix()は両方の色に対してパーセンテージ値を取ることができるため、より柔軟です。

:root {
  --main-color: pink;
  --mix-color: white;
}

.container {
  border: solid 5px var(--main-color);
  ...
}

.container-css {
  background: color-mix(
    in srgb,
    var(--main-color) 15%,
    var(--mix-color) 85%
  );
}

また、Sassはカラー関数でCSSカスタムプロパティを使用できません。

// これは機能しません
.container-sass {
  background: mix(var(--main-color), var(--mix-color), 15%);
}

ネスティング

すべての主要ブラウザでネストされた要素セレクターを使用できます。

ul {
  li {
    color: rebeccapurple;
  }
}

上記の機能だけで、Sassの使用をやめてネイティブCSSに切り替えるのに十分かもしれません。しかし、そうでないかもしれません。サイトで他のSassのような機能が必要な場合はどうすればよいでしょうか？

PostCSSを使用して今後の機能を実装する

PostCSSは、様々なプラグインを使用してCSSをトランスパイルするNodeJSツールです。これらのプラグインの一部は、CSS Working Groupから来る機能を複製し、すべてのブラウザがその機能をサポートするまでのポリフィルとして機能します。他のプラグインは、CSS仕様に追加されない可能性のあるSass機能を複製します。そして、一部は単に便利なものです。PostCSSのウェブサイトで完全なリストを見つけることができますが、ここではいくつかを紹介します。

将来のCSS構文を持つプラグイン

主要なブラウザはすでにこれらの一部をサポートしており、状況は常に変化しています。ただし、これらのプラグインは古いブラウザをサポートする良い方法でもあります。

  • postcss-custom-media: Custom Media Specificationに従って@custom-mediaを定義します。カスタムプロパティをメディアクエリで使用できないことを覚えていますか？これがその回避策です。
  • postcss-media-minmax: Media Queries 4 Specificationで定義された範囲表記を追加します。
  • postcss-preset-env: 将来のCSS構文をカバーするプラグインです。

Sass機能を複製するプラグイン

これらの多くはCSS仕様に取り入れられない可能性があります。Sassから離れたい場合、これらのプラグインを使用することで、その機能の一部を引き継ぎながらそれを実現できます。

  • postcss-mixins: Sassのmixin()機能を複製します
  • postcss-map-get: Sassのmap-get機能を複製します
  • postcss-define-function: Sassの関数定義を複製します

便利な機能を持つプラグイン

これらのプラグインは、私たちが便利だと感じたいくつかの機能を提供します。

  • cssnano: CSSミニファイア。CSSをミニファイする他の方法もありますが、これによってPostCSSプラグインを通じて行うことができます
  • postcss-pxtorem: px単位をREMに変換するので、自分でREM計算をする必要がありません。
  • postcss-import: インラインスタイルによってインポートルールを変換します

PostCSSを使用する欠点

特にPostCSSを使用してほぼすべてのことができるのに、なぜSassを使用したいと思うのでしょうか？

まず、CSS仕様に従わないプラグインに慣れてしまう可能性があります。その機能がリリースされたら、新しい構文に合わせてコードを更新する必要があります。非標準的な方法にこだわっている場合、新しい開発者のオンボーディングが困難になる可能性があります。

次に、プラグインが多すぎるとパフォーマンスに影響する可能性があります。ビルド時間やページの読み込みが遅くなる可能性があります。

最後に、使用する技術によっては、セットアップが混乱する可能性があります。実行方法はいくつかあり、ドキュメントが散在している可能性があります。

Sassを使い続けたい場合はどうすればよいですか？

まだSassを手放す準備ができていない場合、SassとネイティブCSSを一緒に使用できます。例えば、Sass変数とカスタムプロパティを一緒に使用できます。何をしているかによっては、両方を混ぜることができます。主にCSSカスタムプロパティを使用し、ミックスインやマップを使用する際にはSass変数に切り替えることができます。

また、SassにはSass変数で動作する独自のバージョンのcalc()があります。これを使用して、除算演算子にmath.divを使用するのを避けることができます。

:root {
  --background-color: #ddd;
  --container-width: 1024px;
}

$background-color: var(--background-color);
$container-width: var(--container-width);

.sass-with-custom-properties-and-calc {
  background-color: $background-color;
  width: calc($container-width / 2);
  ...
}

では、まだSassを使用すべきですか？

それは状況次第です！

Sassはしばらくの間なくなることはないので、好きなだけ使用してください。もちろん、dart-sassを使用している限りですが。まだ使用する理由はいくつかあります。

  • ネイティブCSSがまだSassに追いついていないと感じる場合。
  • 複雑なミックスイン、関数、マップを使用している場合。
  • まだレガシーブラウザバージョンをサポートする必要がある場合。
  • Sassを削除するためにコードベースを更新するのが時間がかかりすぎる場合。
  • 単に使いたいから。

結論

フロントエンド開発者にとって素晴らしい時代です。カスタムプロパティやネスティングなど、CSSへの新しい追加機能は長い間待ち望まれており、私たちの作業をよりクリーンにします。PostCSSは、品質向上機能でネイティブCSSを強化し、Sassが今日サポートしている機能を追加します。また、コードベースを徐々に切り替えながら、SassとCSSを一緒に使用することもできます。

©コハム