CSS3 は本当に SCSS に取って代わるのでしょうか?

Web ページのスタイル設定に関しては、プロジェクトで純粋な CSS または SCSS (および他のプロセッサ) を使用する選択肢があります。 SCSS は CSS のスーパーセットです。ほとんどの開発者は、SCSS は高度な機能と明確な構文を備えているため、CSS よりも使いやすいことに同意しています。

この記事では、SCSS の機能と、CSS が長年にわたってどのように改善されてきたかについて説明します。さらに、実際のプロジェクトで CSS を SCSS の代わりに使用できるかどうかを評価します。

CSSの現在の機能

CSS は誕生以来、長い道のりを歩んできました。近年の CSS の発展により、アニメーションの分野で JavaScript を使用する必要性も低下しました。最新のブラウザでは、これらの CSS アニメーションのパフォーマンスを向上させるために GPU も使用されます。少し学習するだけで、CSS を使用して複雑なレスポンシブグリッドレイアウトを構築できるようになりました。

今日の CSS には多くの新機能がありますが、この記事では、最新の Web アプリケーションでよく使用されるいくつかの新機能に焦点を当てます。

あらゆる Web アプリケーションを構築する場合、最も重要な部分はページのレイアウトです。私たちのほとんどは長年 Bootstrap などの CSS フレームワークに依存してきましたが、CSS では現在、レイアウトをネイティブに構築するための Grid、Subgrid、Flexbox などの新しい機能が提供されています。 Flexbox は開発者の間で広く人気がありますが、グリッドレイアウトも追いつきつつあります。
柔軟なテキストレイアウト
Transition と Transform の強力な機能により、アニメーションを作成するために JavaScript を使用する必要がなくなりました。
カスタムプロパティまたは変数

SCSSの特徴

SCSSは変数の使用をサポートしており、冗長なコードを回避します

実際に、スタイルシートでは、さまざまなcolorやその他の要素の定義 ( fontなど) を再利用できます。これらの再利用可能なものを統一された場所で宣言するために、SCSS は変数機能を提供します。これにより、変数名を使用して特定の色を表し、色の値を書き換える代わりに、プロジェクト内の他の場所で変数名を使用できるようになります。

たとえば、次の例をご覧ください。

$黒: #000000;
$primary-font: 'Ubuntu'、'Helvetica'、サンセリフ;
$単位: 1rem;

体 {
    色: $black;
    フォントファミリ: $primary-font;
    パディング: #{$unit * 2};
}

CSS は変数とカスタムプロパティもサポートします。CSS のカスタムプロパティは次のとおりです。

--黒: #000000;
--幅: 800px;
--primaryFont: 'Ubuntu'、'Helvetica'、サンセリフ;

体 {
    幅: var(--width);
    色: var(--black);
    フォントファミリ: var(--primaryFont);
}

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

これは、ブラウザが実行時にこれらの属性を処理するためです。一方、SCSS は前処理フェーズで CSS に変換され、変数を処理します。したがって、SCSS での変数の使用とコードの再利用は、CSS よりもパフォーマンスが向上します。

SCSSはネストされた構文を許可し、より簡潔なソースコード

次のような CSS コードブロックがあるとします。

.ヘッダー{
    パディング: 1rem;
    border-bottom: 1px のソリッドグレー;
}

.header .nav {
    リストスタイル: なし;
}

.header .nav li {
    ディスプレイ: インラインフレックス;
}

.header .nav li a {
    ディスプレイ: フレックス;
    パディング: 0.5rem;
    色: 赤;
}

上記のコードは、子要素にスタイルを追加するために同じ親要素を繰り返し宣言する必要があるため、わかりにくいように見えます。

しかし、SCSS のネストされた構文を使用すると、より簡潔なコードを記述できます。上記のコードを SCSS で記述すると、次のようになります。

.ヘッダー{
    パディング: 1rem;
    border-bottom: 1px のソリッドグレー;

    .nav {
        リストスタイル: なし;

        li {
            ディスプレイ: インラインフレックス;

            {
                ディスプレイ: フレックス;
                パディング: 0.5rem;
                色: 赤;
            }
        }
    }
}

したがって、SCSS を使用してコンポーネントを設計すると、従来の CSS に比べて、よりエレガントで簡潔になります。

@extend 機能 - 同じスタイルを繰り返さないでください。

SCSS では、 @extendを使用して、異なるセレクタ間で同じプロパティを共有できます。プレースホルダーでの@extendの使用方法は次のとおりです。

%unstyled-list {
    リストスタイル: なし;
    マージン: 0;
    パディング: 0;
}

%unstyled-listコードの繰り返し記述を回避できる構文糖です。このリストスタイルテンプレートは、たとえば次のようなさまざまな場所で使用できます。

.検索結果{
    @extend %unstyled-list;
}

.広告{
    @extend %unstyled-list;
}

.ダッシュボード{
    @extend %unstyled-list;
}

同様に、この定義をインポートするすべてのスタイルシートで再利用できます。

SCSS には、関数、ミックスイン、ループなど、フロントエンド開発をより効率的にする多くの機能もあります。

SCSS から CSS に切り替えるべきでしょうか?

上記では、現在 CSS によって提供されている機能と SCSS の機能について説明しました。しかし、CSS と SCSS を比較すると、CSS にはない必要な機能がいくつかあることがわかります。

Web アプリケーションが成長し続けるにつれて、スタイルシートはより複雑で大きくなります。 CSS のネスト機能によりコードの可読性が大幅に向上し、このようなプロジェクトの開発が容易になります。ただし、この記事の執筆時点では、CSS はまだこの機能をサポートしていません。
CSS はフロー制御ルールを処理できません。 SCSS には、 @if 、 @else 、 @each 、 for @whileなどの組み込みのフロー制御ルールが用意されています。プログラマーとして、この機能はスタイルを定義するのに非常に便利だと思います。これにより、より少ない、より簡潔なコードを記述できるようになります。
さらに、SCSS は数値演算子の標準セットをサポートしていますが、CSS では数値計算を実行するためにcalc()関数を使用する必要があります。 SCSS 数値演算では、互換性のある単位間で自動的に変換することもできます。

ただし、 calc() CSS 関数には、除算の場合は除数が数値でなければならない、乗算の場合は少なくとも 1 つの引数が数値でなければならないなど、いくつかの制限があります。

もう 1 つの重要な側面は、SCSS の「キラー機能」であるスタイルの再利用です。この点で、SCSS は組み込みモジュール、マッピング、ループ、変数などの多くの機能を提供します。

したがって、CSS には多くの新機能が生まれていますが、それでも SCSS の方が優れた選択肢であると私は考えています。下のコメント欄であなたの考えをお聞かせください。

CSS3 が本当に SCSS に取って代わるかどうかについてのこの記事はこれで終わりです。CSS3 が SCSS に取って代わるかどうかについての詳細は、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML 5.1 学習: 14 の新機能とアプリケーション例

>>: 初心者向けBootstrap 3.0学習ノート