CSS プリプロセッサをマスターする: Sass、Less、Stylus のガイド-CSSチュートリアル-php.cn

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;
            }
        }
    }
}

ログイン後にコピー

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

結果 :

Mastering CSS Preprocessors: A Guide to Sass, Less, and Stylus

テーマ - 少ない例:

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

.button
    border-radius(5px)

ログイン後にコピー

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

結果 :

Mastering CSS Preprocessors: A Guide to Sass, Less, and Stylus

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 に落ちました)

<!DOCTYPE html>
<html lang="en">
<head>
    <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">
</head>
<body>
    <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;
            }
        }
    }
}

ログイン後にコピー

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

結果:

Mastering CSS Preprocessors: A Guide to Sass, Less, and Stylus

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

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

.button
    border-radius(5px)

ログイン後にコピー

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

結果 :

Mastering CSS Preprocessors: A Guide to Sass, Less, and Stylus

プリプロセッサの選択

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

以上がCSS プリプロセッサをマスターする: Sass、Less、Stylus のガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。