SCSS – CSS ワークフローを強化する

この記事では、変数、ネストされたルール、ミックスイン、機能など。 SCSS を使用すると、特に大規模なプロジェクトの場合、CSS の作成と保守がはるかに簡単になります。

---

1. SCSS とは何ですか?

SCSS は、人気のある CSS プリプロセッサである

Sass (Syntactical Awesome Stylesheets)

の構文です。 CSS と完全に互換性がありますが、次のようなワークフローを強化する強力な機能が導入されています。

変数
ネスト
部分とインポート
ミックスイン
継承

---

2. SCSS 変数

SCSS では、色、フォント、間隔などの値を保存する変数を定義でき、これらの値はスタイルシート全体で再利用できます。これにより、コードがより管理しやすくなり、保守が容易になります。

例:

$primary-color: #3498db;
$font-size: 16px;

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

説明:

$primary-color は 16 進数のカラー コードを保持する変数です。

• $font-size にはフォント サイズの値が保存されます。
変数を使用すると、値を繰り返す必要がなくなり、主な色やフォント サイズを変更する必要がある場合でも、1 か所で変更できます。

---

3. SCSS でのネスト

従来の CSS に対する SCSS の最大の改善点の 1 つは、セレクターをネストできることです。これは HTML の構造を反映し、スタイルシートをより整理した状態に保ちます。

例:

nav {
    background-color: $primary-color;

    ul {
        list-style: none;

        li {
            display: inline-block;
            margin-right: 10px;

            a {
                color: white;
                text-decoration: none;
            }
        }
    }
}

説明:

ここで、

、
• 、 のスタイルは次のとおりです。要素はナビゲーション セレクター内でネストされており、要素間の関係が明確になります。

---

4.パーシャルとファイルのインポート

大規模なプロジェクトでは、CSS の管理が面倒になる可能性があります。 SCSS を使用すると、スタイルを

部分

に分割できます。これは、メイン スタイルシートにインポートできる小さなファイルです。 部分ファイルを作成するには、ファイル名をアンダースコアで始めます (例: _buttons.scss)。その後、それをメイン ファイルにインポートできます。

例:

パーシャルを使用すると、コードをモジュール化して管理しやすくなります。スタイルを _header.scss、_footer.scss、_layout.scss などのセクションに分割できます。

// In _buttons.scss
.button {
    background-color: $primary-color;
    padding: 10px;
}

// In main.scss
@import 'buttons';

---

5.ミックスイン

ミックスインは、繰り返しを避けることができる再利用可能なコードの塊です。変数やパラメータを含めることができるため、再利用可能なコンポーネントやスタイルを作成するのに非常に強力です。

例:

@mixin button-style($bg-color, $padding) {
    background-color: $bg-color;
    padding: $padding;
    border: none;
    color: white;
    cursor: pointer;
}

.button-primary {
    @include button-style($primary-color, 10px);
}

.button-secondary {
    @include button-style(#e74c3c, 12px);
}

説明:

@mixin はスタイルのブロックを定義します。

• @include ステートメントは、これらのスタイルをさまざまな要素に適用するために使用されます。
ミックスインでは、パラメーターによるカスタマイズを可能にしながらコードを再利用できるため、時間を節約できます。

---

6. Extend による継承

SCSS では @extend ディレクティブを使用した継承が可能で、あるセレクターが別のセレクターのスタイルを継承できるようになります。これは、重複を避け、スタイルの一貫性を確保するのに役立ちます。

例:

%message {
    padding: 10px;
    border: 1px solid;
    border-radius: 5px;
}

.success {
    @extend %message;
    border-color: green;
}

.error {
    @extend %message;
    border-color: red;
}

説明:

%message は、共有スタイルを含むプレースホルダー セレクターです。

• .success と .error はこれらのスタイルを拡張し、特定のルールを追加します。
これにより、繰り返しが減り、コードが DRY (繰り返さない) に保たれます。

---

7.機能

SCSS は、スタイルシート内で計算を実行したり値を操作したりできる関数もサポートしています。組み込みの SCSS 関数を使用することも、独自の関数を定義することもできます。

例:

$base-spacing: 10px;

@mixin margin-spacing($multiplier) {
    margin: $base-spacing * $multiplier;
}

.box {
    @include margin-spacing(2);  // Outputs: margin: 20px;
}

説明:

マージン間隔ミックスインは引数として乗数を受け取り、$base-spacing 変数に基づいてマージンを計算します。

---

8.制御ディレクティブとループ

SCSS には、条件文 (@if) やループ (@for、@each、@while) などのプログラミングに似た機能が含まれており、動的なスタイルが可能です。

例:

@mixin generate-columns($count) {
    @for $i from 1 through $count {
        .col-#{$i} {
            width: 100% / $count * $i;
        }
    }
}

@include generate-columns(4);

説明:

このミックスインは、$count 引数に基づいて列クラス (.col-1、.col-2 など) を動的に生成します。 @for ループは列数を繰り返し、幅の計算を適用します。

---

9. SCSS のベスト プラクティス

• モジュール化を維持します: パーシャルを使用して、大きなスタイルシートをより小さく、より管理しやすい部分に分割します。
• 変数を使用する: 色、間隔、フォントなどの一般的な値を変数として定義して、スタイル間の一貫性を確保します。
• 深いネストを避ける: SCSS ではネストが可能ですが、ネストが多すぎるとコードが読みにくくなり、保守しにくくなる可能性があります。深さは 3 ～ 4 レベルにしてください。
• 再利用性のためにミックスインを使用する: 可能な限りミックスインを使用して、コードを DRY に保ちます。
• ファイルに適切な名前を付けます: SCSS ファイルと部分ファイルには明確で一貫した名前を使用します。

---

結論

SCSS は、スケーラブルで保守可能な CSS の作成に関して、革新的なツールです。変数、ネスト、ミックスイン、継承などの強力な機能が導入され、大規模なプロジェクトの管理が容易になり、CSS のよくある落とし穴を回避できるようになります。 SCSS を採用することで、開発プロセスを合理化し、コードの可読性を向上させ、スタイルをより保守しやすくすることができます。

---

LinkedIn でフォローしてください -

リドイ・ハサン

以上がSCSS – CSS ワークフローを強化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。