🧓

拡張言語のメリットと言われる機能は今のCSSでどこまでできるのか検証

2023/06/04に公開

CSS

背景

"sass メリット"で検索して出てきた下記のサイトで挙げられているメリットは今どうなのかを検証する。

検証

ネスト（入れ子）が使えて構造が把握しやすい

下記のように書ける。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTMLファイル</title>
    <style>
      .h1 {
        font-weight: bold;
        > span {
          color: red;
        }
      }
    </style>
  </head>
  <body>
    <h1 class="h1">h1テキスト<span class="span">ネストレッドテキスト</span></h1>
  </body>
</html>

Sassと全く同じ書き方ではないので、置き換える場合は注意。
モダンブラウザでもサポートされるようになったので問題なく使用できるが、SafariはSafari Technology Preview 162なので、Safari バージョン16.4は未対応。一般ユーザー向けのSafariが推奨ブラウザの場合は注意。
https://webkit.org/blog/13813/try-css-nesting-today-in-safari-technology-preview/

変数が使える

カスタムプロパティとして下記のように書ける。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTMLファイル</title>
    <style>
      :root {
        --red-color: red;
      }

      h1 {
        font-weight: bold;
        > span {
          color: var(--red-color);
        }
      }
    </style>
  </head>

  <body>
    <h1 class="h1">h1テキスト<span class="span">ネストレッドテキスト</span></h1>
  </body>
</html>

Safari 16.4で適用されていなかった。。Can I Useではサポート済のようなのに謎
https://caniuse.com/css-variables
Technology Preview 171 (Safari 16.4)では適用されていた。

四則演算ができる

内容的には、変数を用いて四則演算ができるか否かによるもの。
下記のように書ける。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HTMLファイル</title>
    <style>
      :root {
        --width: 100%;
        --minus-value: 100px;
      }

      div {
        color: white;
        background: black;

        width: calc(var(--width) - var(--minus-value));
      }
    </style>
  </head>

  <body>
    <div>ブロック</div>
  </body>
</html>

calcは省略できる旨のWeb記事もあったが、省略不可。

ファイルを分割できる

記事ではimportを使うように書かれているが非推奨なので、@useや@forwardを使った方がいい。
CSSの方でも@importはパフォーマンス的な問題もあるので、直接読み込む方がいい。
また、パーシャル機能はCSSには実装されていないので、どうしても使いたいならSassの選択となる。

Mixin（ミックスイン）でスタイルを引用できる
スタイルを継承で使い回せる
-> どこまでやるかにもよるが、個人的にはあまり使わない印象。
Sassでは@extendを使用することで下記のように書けるが、共通化しすぎるとカオスなcssになるので用法用量は守って正しく使いたい。

.text {
  color: blue;
}

.large-text {
  @extend .text;
  font-size: 2em;
}

JavaScriptのように関数が使える

CSSにはできない記法。
可読性が悪かったり、デバッグ困難なので、個人的にはCSSにロジックを書きたくない。。

$theme: "dark";

body {
  background-color: if($theme == "dark", #000, #fff);
  color: if($theme == "dark", #fff, #000);
}

@for $i from 1 through 5 {
  .padding-#{$i} {
    padding: #{$i * 10}px;
  }
}

結論

CSSでも結構快適にマークアップできそうだが、Safariが現状Technology Previewでの対応だったりするので、Safariも動作対象にしている場合は、Sassのお世話になることはまだありそう。
ネスト/変数/四則演算がサポートされていれば問題なく、ネイティブなCSSでも書いていけそうな印象。
また、Tailwind CSSやCSS in JSでCSS自体を書くことも少なくなってきている。

背景

検証

結論

Discussion