CSS プリプロセッサをマスターする: Sass、Less、Stylus のガイド

CSS 学習者の皆さん、こんにちは！私たちの小さなコーナーへようこそ!?

導入

Sass、Less、Stylus などの プリプロセッサは、変数、ネスト、ミックスインなどの機能を導入して、スタイルの記述方法を変革できます。これらは CSS そのものではなく、CSS にコンパイルされるツールであり、スタイル設定に対するより強力で保守しやすいアプローチを提供します。これらの魔法のツールについてさらに詳しく見てみましょう。

この記事で学べること?

• プリプロセッサについて : その本質と CSS の強化方法。

• 高度な機能 : ループ、条件分岐、より複雑なネストなどの基本を超えた機能。

• プリプロセッサの選択 : コミュニティ サポートやツールを含む、より詳細な比較。

• 実践例 : 高度な使用例を詳細な説明とともに示します。

• ベスト プラクティス : プリプロセッサを効果的に使用するためのヒント。

• リソース : 学習を続けるために次に進むべき場所。

CSS プリプロセッサとは何ですか?

CSS プリプロセッサは CSS 言語を拡張し、よりモジュール化され、読みやすく、保守しやすいスタイルシートを可能にする機能を追加します。これらは標準 CSS にコンパイルされ、ブラウザーで使用されます。

CSS プリプロセッサの主な機能

変数: 変数を使用すると、再利用および簡単に変更したい情報を保存できます。

Sass の例 (SCSS):

$primary-color: #3498db;

body {
    background-color: $primary-color;
}

ここで、$primary-color は一度定義され、スタイルシート全体で使用されます。色を変更する必要がある場合は、1 か所で更新するだけです。

?ところで、Sass と SCSS の違いについての素晴らしい記事がここにあります。

ネスト: ネストすると、関連するスタイルをグループ化できるため、CSS が読みやすくなります。

Less の例:

.nav {
    background-color: #f2f2f2;
    ul {
        list-style: none;
        padding: 0;
        li {
            display: inline-block;
            a {
                color: #333;
                text-decoration: none;
            }
        }
    }
}

これにより、.nav、その ul、li、および a 要素のスタイルがネストされ、関連するスタイルがまとめられます。

ミックスイン: ミックスインは、他のセレクターに含めることができる再利用可能なクラスまたはプロパティのセットです。

スタイラスの例:

(注: はい、これは SCSS ではなく Stylus ですが、このオプションがなかったので SCSS に落ちました)

border-radius(n)
    -webkit-border-radius n
    -moz-border-radius n
    border-radius n

.button
    border-radius(5px)

境界半径ミックスインはパラメーター n で定義されます。 .button クラスはこのミックスインを使用し、異なるブラウザーのプレフィックスに同じ境界線の半径を適用します。

関数: 関数は CSS を動的に生成できます。

Sass での例 (SCSS)

@function pxToEm($px, $base: 16px) {
    @return ($px / $base) * 1em;
}

body {
    font-size: pxToEm(14);
}

この関数はピクセルを ems に変換し、異なる基本フォント サイズ間で一貫したタイポグラフィを維持しやすくします。

インポート: インポートを使用すると、CSS を複数のファイルに分割して整理しやすくなります。

Less の例:

$primary-color: #3498db;

body {
    background-color: $primary-color;
}

変数ファイルがメイン ファイルにインポートされ、必要に応じて @link-color を使用できるようになります。

?注: codepen.io を使用して、上記の例の結果を確認し、コードをさらに実験することができます!

実用的な使用例

レスポンシブデザイン - Sass (SCSS*) 例:*

.nav {
    background-color: #f2f2f2;
    ul {
        list-style: none;
        padding: 0;
        li {
            display: inline-block;
            a {
                color: #333;
                text-decoration: none;
            }
        }
    }
}

ブレークポイントに変数を使用すると、レスポンシブ デザインがより管理しやすく、一貫性のあるものになります。

結果 :

テーマ - 少ない例:

border-radius(n)
    -webkit-border-radius n
    -moz-border-radius n
    border-radius n

.button
    border-radius(5px)

テーマは @theme 変数を変更することで簡単に切り替えることができ、対応するテーマ スタイルが適用されます。

結果 :

CSS プリプロセッサの高度な機能

繰り返し用のループ: ループを使用すると、CSS を動的に生成することで繰り返しを減らし、リストまたはマップを繰り返し実行できます。

Sass (SCSS) の例:

@function pxToEm($px, $base: 16px) {
    @return ($px / $base) * 1em;
}

body {
    font-size: pxToEm(14);
}

ここでは、各ルールを手動で記述することなく、ループによってさまざまなフォント サイズのクラスが作成されます。このループはフォント サイズの異なる 3 つのクラスを生成し、ループによって CSS の繰り返しがどのように削減されるかを示します。

動的スタイルの条件: 条件を使用すると、特定の条件に基づいてスタイルを適用でき、CSS をより動的にできます。

Less の例:

// _variables.less
@link-color: blue;

// main.less
@import "_variables.less";

a {
    color: @link-color;
}

条件文を使用すると、変数値に基づいてさまざまなスタイルを適用でき、動的コンポーネントの作成に最適です。この例では、@type がアラートかどうかに基づいてアラートの外観が変わります。

親セレクターの参照: 親セレクターの参照を使用すると、ネストされたルール内の親のセレクターをエレガントに変更または拡張できます。

スタイラスの例:

(注: はい、これは SCSS ではなく Stylus ですが、このオプションがなかったので SCSS に落ちました)

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Container Example</title>
    <link rel="stylesheet" href="styles.css">


    <div>





<pre class="brush:php;toolbar:false">$breakpoint-sm: 576px;
$breakpoint-md: 768px;

.container {
    width: 100%;

    @media (min-width: $breakpoint-sm) {
        width: 540px;
    }

    @media (min-width: $breakpoint-md) {
        width: 720px;
    }
}

このスタイラスの例は、親、そのホバー状態、およびネストされた要素にスタイルを適用する方法を簡潔に示しています。また、& を使用して親セレクターを参照する方法、またはネストされたルールの条件ステートメントで親セレクターを使用する方法も示します。

数学演算: プリプロセッサにより CSS 内で数学演算が可能になり、グリッド幅などの値を動的に計算できるようになります。

Sass (SCSS) の例:

$primary-color: #3498db;

body {
    background-color: $primary-color;
}

この例では、数学を使用してグリッド システムに基づいて幅を設定します。

高度な〜実践的な使用例

複雑なテーマ - Sass (SCSS) 例:

.nav {
    background-color: #f2f2f2;
    ul {
        list-style: none;
        padding: 0;
        li {
            display: inline-block;
            a {
                color: #333;
                text-decoration: none;
            }
        }
    }
}

上記のコードは、マップとループを使用してテーマを動的に作成および適用し、テーマの切り替えを簡単に行う方法を示しています。

結果:

応答性の高いユーティリティ - 以下の例:

border-radius(n)
    -webkit-border-radius n
    -moz-border-radius n
    border-radius n

.button
    border-radius(5px)

これにより、さまざまな見出しサイズに対応するユーティリティ クラスが作成され、応答性の高いユーティリティを簡単に生成する方法が示されます。

結果 :

プリプロセッサの選択

• Sass (SCSS 構文を使用) は広く使用されており、優れたツールがあり、その機能によりより強力であると考えられることがよくあります。

• Sass は、スタイルを継承するための @extend ディレクティブなどの強力な機能を備えた堅牢で、Compass などのツールで広くサポートされています。

• Less は、そのシンプルさと CSS への類似性で知られており、前処理の入門に適しています。

• Less には JavaScript ベースのコンパイラがあり、開発用のブラウザ内コンパイルに有利です。

• Stylus は非常に柔軟な構文を提供しており、括弧を使用する代わりにインデントを選択できるため、一部の開発者にとって読みやすくなります。

プリプロセッサを使用するためのベスト プラクティス

• モジュラー CSS : スタイルを論理的で再利用可能なモジュールまたは部分に分割します。

• 深いネストを避ける : ネストは強力ですが、入れ子が多すぎると、CSS が複雑でオーバーライドが困難になる可能性があります。

• 変数を使用 : 色、サイズ、またはサイト全体で変更する必要がある値については、

• 適度なミックスイン : 一般的なパターンに使用しますが、効率的にコンパイルしないと CSS が肥大化する可能性があるため、使いすぎることには注意してください。

• Lint : stylelint などのツールを使用して、プリプロセッサ コードがベスト プラクティスに従っていることを確認します。

さらなる学習のためのリソース

サス:

• 公式ドキュメント : Sass の構文と機能を理解するための開始点として最適です。

• 高度な Sass トレーニング : 実際のプロジェクトで Sass を使用するためのヒントとベスト プラクティス。

• Playground : Sass コード スニペットをテストおよび共有するためのオンライン Sass プレイグラウンド。

少ない:

• 公式ドキュメント : Less が提供するすべての機能について説明します。

• Less Hat : Less 用のミックスインと関数のコレクション。一般的な CSS タスクに役立ちます。 このプロジェクトは積極的にメンテナンスされていないことに注意してください。

• Playground : ブラウザーでテストするコードを減らします。

スタイラス:

• 公式ドキュメント : Stylus の機能を詳しく説明します。

• スタイラス チュートリアル: スタイラスを学ぶ - 初心者から中級者までのユーザー向けのステップバイステップ ガイド。

• Stylus REPL : Stylus コードを試すための対話型環境。

一般的な CSS プリプロセッサ:

• CSS トリック : 実際の例を含むプリプロセッサに関するさまざまな記事。

• Smashing Magazine : CSS 前処理テクニックに関する詳細な記事。

• Codeacademy : CSS プリプロセッサに関する対話型コースを提供します。

ツールと統合:

• Prepros : ブラウザーのライブ更新を備えた、プリプロセッサをコンパイルするための GUI ツール。

• Webpack ローダー付き: プリプロセッサをビルド パイプラインに統合するため。

• Koala : sass をより簡単にコンパイルするためのオープンソースのクロスプラットフォーム GUI アプリケーション。 Koal は私のお気に入りの 1 つですが、Koal のプロジェクトはアーカイブされてお​​り、積極的にメンテナンスされていないことに注意してください。

結論

Sass、Less、Stylus などの CSS プリプロセッサは、単に CSS を記述するだけではありません。よりスマートで、より保守しやすい CSS を書くことが重要です。これらは、よりクリーンでより組織化されたスタイルシートを可能にする抽象化レベルを導入し、CSS だけでは提供できない機能を開発者に提供します。変数、ネスト、ミックスイン、その他の高度な機能を使用すると、プロジェクトの生産性とスケーラビリティを大幅に向上できます。

Sass、Less、Stylus のいずれを選択するかは、機能だけでなく、ワークフローの好み、コミュニティのサポート、ツールの統合も考慮する必要があることに注意してください。これらのツールを使用して成長するにつれて、開発プロセスがスピードアップするだけでなく、CSS のデザインとアーキテクチャの新しい可能性が開かれることがわかります。

それでは、これらのプリプロセッサを実際に試してみましょう。学習を続け、コーディングを続けて、あなたのスタイルシートがモジュール化されて効率的になりますように! ?

---

?こんにちは、私はエレフテリアです。コミュニティ マネージャー開発者、講演者、コンテンツ作成者

です。

?この記事が気に入ったら、共有することを検討してください。

? すべてのリンク | X | LinkedIn