[css3]CSS3は本当にSCSSに取って代わるのだろうか？

ウェブページをスタイリングするとき、私たちはプロジェクトでプレーンなCSSかSCSS（他の処理系も含む）のどちらかを選択することができます。SCSSは高度な機能と明確な構文のおかげで、CSSよりも使いやすいというのが多くの開発者の意見です。

今回は、SCSSの機能とCSSの機能向上について紹介したいと思います。また、実際のプロジェクトにおいて、CSSがSCSSの代替となり得るかどうかを評価します。

CSSの現在の機能

CSSはその誕生以来、長い道のりを歩んできました。近年のCSSの進化は、アニメーション領域でJavaScriptを使う必要性をも減らしています。最近のブラウザは、こうしたCSSアニメーションのパフォーマンスを高めるためにGPUを利用することさえあるのです。私たちは、少し勉強するだけで、CSSを使って複雑なレスポンシブ・グリッドレイアウトを構築できるようになりました。

今日のCSSには多くの新機能がありますが、この記事では、現代のWebアプリケーションでよく使われる新機能の一部のみを紹介します。

• あらゆるWebアプリケーションを構築する上で最も重要な部分の1つは、ページのレイアウトです。私たちの多くは、長年にわたって Bootstrap などの CSS フレームワークに依存してきましたが、CSS には、Grid、Subgrid、Flexbox など、レイアウトをネイティブに構築するための新しい機能が追加されています。Flexboxは開発者の間で人気がありますが、Gridレイアウトも追い上げてきています。
• 柔軟なテキストレイアウト
• TransitionとTransformを使えば、JavaScriptでアニメーションさせる必要はありません。
• プロパティや変数のカスタマイズ

 SCSSの機能

SCSS は変数の使用をサポートします - 冗長なコードを避けることができます。

実際にスタイルシートの中でたくさんの色を再利用することができます。 color や他の要素定義（例えば、フォント font ). このように再利用可能なものをまとめて宣言するために、SCSSは変数機能を提供しています。これにより、色の値を一から書き直すのではなく、色のための変数名を使い、その変数名をプロジェクト内の他の場所で使用することができます。

例えば、次のような例です。

$black: #000000;
$primary-font: 'Ubuntu', 'Helvetica', sans-serif;
$unit: 1rem;

body {
    color: $black;
    font-family: $primary-font;
    padding: #{$unit * 2};
}

CSSは変数やカスタムプロパティもサポートしており、CSSのカスタムプロパティは以下の通りです。

--black: #000000;
--width: 800px;
--primaryFont: 'Ubuntu', 'Helvetica', sans-serif;

body {
    width: var(--width);
    color: var(--black);
    font-family: var(--primaryFont);
}

しかし、実行時にはCSSカスタムプロパティはSCSS変数よりも時間がかかる。

これは、ブラウザが実行時にプロパティを確認するためです。SCSSの場合はその逆で、CSSに変換された後、前処理の段階で変数をスルーしてしまうのです。その結果、SCSSでの変数の使用とコードの再利用は、CSSよりもパフォーマンスが高くなります。

SCSSはネストした構文が可能 - よりクリーンなソースコード

例えば、次のようなCSSコードのブロックがあったとします。

.header {
    padding: 1rem;
    border-bottom: 1px solid grey;
}

.header .nav {
    list-style: none;
}

.header .nav li {
    display: inline-flex;
}

.header .nav li a {
    display: flex;
    padding: 0.5rem;
    color: red;
}

上記のコードは、子要素にスタイルを追加するために、同じ親要素を何度も宣言しなければならず、混乱しているように見えます。

しかし、SCSSのネストされた構文を使えば、もっとすっきりしたコードを書くことができるのです。上記のコードをSCSSで書くと、次のようになります。

.header {
    padding: 1rem;
    border-bottom: 1px solid grey;

    .nav {
        list-style: none;

        li {
            display: inline-flex;

            a {
                display: flex;
                padding: 0.5rem;
                color: red;
            }
        }
    }
}

その結果、SCSSを使ったコンポーネントのデザインは、従来のCSSよりもエレガントでクリーンな印象を与えます。

エクステンド機能 -- 同じスタイルの繰り返しを避けよう

%unstyled-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

%unstyled-list は、コードの繰り返しを避けるための構文上の糖であり、このリスト形式のテンプレートをさまざまな場所で、たとえば

.search-results {
    @extend %unstyled-list;
}

.advertisements {
    @extend %unstyled-list;
}

.dashboard {
    @extend %unstyled-list;
}

繰り返すが，この定義が導入されるすべてのスタイルシートで再利用することができる。

SCSSには他にも関数、ミキシン、ループなど、フロントエンドの開発を効率化する機能がたくさんあります。

SCSSからCSSに切り替えた方が良いですか？

上記では、CSSで利用できる機能とSCSSで利用できる機能を探りました。しかし、CSSとSCSSを比較すると、CSSでは利用できない必須機能があることがわかります。

• Web アプリケーションが進化し、スタイルシートがより複雑で大規模になると、CSS のネスト機能によってコードの可読性が大幅に向上し、そのようなプロジェクトを容易に開発することができるようになります。しかし、執筆時点では、CSS はこの機能をサポートしていません。
• CSSではフロー制御のルールを扱うことができません。SCSSは以下のようなルールをビルトインでサポートしています。 @if , @else 或いは、@else

  @each
   for
  

  そして @while をフロー制御のルールとして使用します。プログラマーとして、この機能はスタイルを定義するのに非常に便利だと感じています。また、より少ないコードですっきりとしたコードを書くことができるようになりました。
• また、SCSSでは数値演算子の標準セットをサポートしていますが、CSSの場合は calc() SCSSの数値演算は、その互換性のある単位間で自動的に変換することもできます。

しかし． calc() このCSS関数は、除算の場合は除数が数字でなければならない、乗算の場合は引数のうち少なくとも1つが数字でなければならない、といった制約がほとんどないのが特徴です。

• もうひとつ重要なのは、SCSSのキラーフィーチャーであるスタイルの再利用です。SCSSは、組み込みモジュール、マッピング、ループ、変数など、この分野で多くの機能を提供しています。

だから、CSSの新機能がいろいろ出てきても、SCSSに軍配が上がるのだと思います。以下のコメント欄で、あなたの考えを聞かせてください。

CSS3が本当にSCSSに取って代わるのかについての記事は以上です。CSS3がSCSSに取って代わることについての詳細は、スクリプトハウスの過去記事を検索するか、以下の記事を引き続き閲覧してください。