技術共有

scssの概念と使用法

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

目次

scssとは何ですか

scssとcssの比較

scssの使用

変数を宣言する

デフォルト変数を微分する

グローバル変数とローカル変数を区別する

入れ子の構文

セレクターのネスト

基本的なネスト

ネストされた親セレクター参照 (&)

ネストに関する考慮事項

ネストされた

プロパティのネスト

基本的な属性のネスト

ネストに関する考慮事項

継承する

基本的な使い方

継承に関する注意事項

アプリケーションシナリオ

プレースホルダー%

プレースホルダーを定義する

継承プレースホルダ

利点と適用可能なシナリオ

予防

ミックス @mixin

ミックスを定義する

コールミックス

利点と適用可能なシナリオ

予防

SCSS は条件ステートメントを使用します

@if ステートメント

@else および @else if ステートメント

条件文の入れ子

結論は

SCSS の 3 種類のループ

@forループ

@各ループ

@while ループ

要約する

カスタム機能と使い方

カスタム関数を定義する

カスタム関数を使用する

予防

宿題


scssとは何ですか

SCSS (Sassy CSS) は CSS のプリプロセッサ言語であり、CSS に基づいてより多くの機能と柔軟性を提供し、スタイル シートの作成と管理をより効率的かつ便利にします。

SCSS の利点は次のとおりです。

  • 変数: SCSS では、変数を使用して色、フォント サイズなどの値を保存できるため、スタイル シート全体でこれらの値を均一に調整することがより便利で保守しやすくなります。
  • ネストされたルール: SCSS でネストされたルールを使用すると、スタイルを整理してコード構造を明確にすることができます。たとえば、要素の擬似クラス スタイルを複数の場所に記述する代わりに、その親要素のスタイル ブロックに記述することができます。
  • ミックスイン: ミックスインは、一連のスタイル プロパティを再利用可能なブロックに結合する方法です。これにより、同じスタイルのコードを繰り返し記述することが回避され、コードの再利用性と可読性が向上します。
  • インポート (インライン インポート): @import ルールを使用して、複数の SCSS ファイルを 1 つのファイルにマージできます。このアプローチは、スタイル シートを論理ユニットに分割するのに役立ち、必要に応じて柔軟に編成および管理できます。
  • 継承 (拡張): SCSS は、@extend キーワードによるスタイルの継承をサポートしています。これにより、スタイル シートがよりモジュール化され、保守しやすくなります。
  • 演算: SCSS では、スタイル シートで加算、減算、乗算、除算などの数学演算を行うことができ、一部の動的なスタイル計算を処理するのに役立ちます。
  • モジュール性: SCSS の特性により、スタイル シートがよりモジュール化され構造化され、特に大規模なプロジェクトでスタイルの管理と維持が向上します。

要約すると、SCSS は CSS のすべての機能を保持するだけでなく、変数、ネスト、混合、インポートなどの高度な機能も導入しています。これらの機能により、開発者はスタイル シートをより効率的に作成および管理できるようになり、最新のフロントエンドで一般的に使用されています。ツールの 1 つを終了します。

scssとcssの比較

文法:

  • CSS: 基本的なカスケード スタイル シート構文。ルールはセレクター、属性、値によって定義されます。
  • SCSS: SCSS は、CSS のプリプロセッサ言語であり、変数、ネストされたルール、ミックスイン、インポートなど、スタイル シートの記述をより柔軟かつ効率的にするための関数と構文を提供します。

読みやすさと保守性:

  • CSS: 大規模なプロジェクトでは、CSS ファイルには構造化されたモジュール機能が欠けているため、非常に冗長になり、保守が困難になることがあります。
  • SCSS: SCSS は変数とネストされたルールをサポートしており、これらの機能によりコードが読みやすく、保守しやすくなります。変数とミックスインを使用すると、コードの繰り返し記述が軽減され、入れ子になったルールで HTML 構造の階層関係をより明確に表現できます。

機能拡張:

  • CSS: 標準 CSS は、基本的なスタイル定義とセレクターのマッチングのみを行うことができます。
  • SCSS: SCSS では、混合、継承、計算などの高度な機能が導入されており、これらの機能によりスタイル シートがより柔軟かつ強力になり、複雑なスタイル要件に適切に対応できるようになります。

互換性:

  • CSS: ブラウザは CSS を直接サポートしており、追加のコンパイル手順は必要ありません。
  • SCSS: SCSS は、ブラウザーで理解して適用する前に、コンパイラーによって通常の CSS ファイルに変換される必要があります。

学習曲線:

  • CSS: CSS の学習は比較的簡単で、セレクター、プロパティ、値の基本的な組み合わせを理解するだけです。
  • SCSS: SCSS を学習するには、変数、混合、ネストなどの独自の構文と関数を習得する必要があり、これには特定の学習と適応プロセスが必要です。

要約すると、通常の CSS と比較して、SCSS はスタイル シートの作成とメンテナンスを簡素化するためのツールと機能が多く提供されており、大規模で複雑なプロジェクトの開発に特に適しています。ただし、小規模なプロジェクトや単純なスタイル設定が必要な場合は、プレーン CSS の方が簡単で便利な場合があります。

scssの使用

scss を学習する前に、まず vscode に 2 つのプラグインをインストールして、その後の学習のために scss を通常の CSS ファイルに変換します。

プラグインストアでsassを検索し、以下の2つのプラグインをダウンロードしてvscodeを再起動してください。

変数を宣言する

SCSS での変数の宣言は非常に簡単で、$ 記号を使用して変数を定義できます。

以下は、SCSS で変数を宣言して使用する方法を示す簡単な例です。

  1. // 定义变量
  2. $primary-color: #3498db;
  3. $secondary-color: #2ecc71;
  4. // 使用变量
  5. body {
  6. background-color: $primary-color;
  7. }
  8. a {
  9. color: $secondary-color;
  10. }

上の例では、2 つの変数 $primary-color と $Secondary-color を定義して、それぞれ原色と二次色を格納しました。これらの変数をスタイル ルールで使用すると、スタイル シート全体で色の一貫性を保ち、簡単に変更できます。

SCSS ファイルが通常の CSS ファイルにコンパイルされると、すべての変数が対応する値に置き換えられるため、最終的に生成される CSS ファイルには変数宣言が含まれません。

デフォルト変数を微分する

SCSS では、デフォルト変数を使用して、変数が定義されていない場合に代替値を確実に持つことができます。これは、テーマを操作したり、スタイルを構成したりするときに特に便利です。

デフォルト変数を宣言して使用する方法の例を次に示します。

  1. // 声明变量,并设置默认值
  2. $primary-color: #3498db !default;
  3. $secondary-color: #2ecc71 !default;
  4. // 使用变量
  5. body {
  6. background-color: $primary-color;
  7. }
  8. a {
  9. color: $secondary-color;
  10. }

上の例では、!default タグを使用してデフォルト値を定義しました。これは、$primary-color または $ Secondary-color が SCSS ファイルに導入される前に他の場所で定義されていない場合、指定されたデフォルト値 (#3498db および #2ecc71) が使用されることを意味します。ファイルをインポートする前にこれらの変数が定義されている場合、デフォルト値は無視されます。

デフォルト変数を使用する利点は、すでに定義されている変数を上書きせずに、変数に代替値を提供できることです。これは、テーマを作成したり、複数のスタイル ファイル間で変数を共有したりする場合に特に便利です。

グローバル変数とローカル変数を区別する

  • グローバル変数: グローバル変数は、セレクターの外部またはミキサー/関数の外部で宣言された変数です。これらはスタイルシート全体からアクセスでき、同じグローバル変数が複数のファイルで定義されている場合でも、それらの値は一貫したままになります。
  • ローカル変数: ローカル変数は、セレクター内またはミキサー/関数内で定義される変数です。これらは、定義されているスコープ内でのみ使用でき、そのスコープ外では無効になります。

注: ローカル変数はグローバル変数をオーバーライドします

グローバル変数と同じ名前の変数がローカル スコープで再宣言されると、ローカル変数によってグローバル変数の値が上書きされます。これにより、グローバルな状況に影響を与えることなく、特定のセレクターまたはミキサーに対してさまざまな変数値を定義できます。

!global キーワードを使用してローカル変数をグローバル変数に変換します

SCSS には、ローカル変数をグローバル変数として明示的に宣言するための !global キーワードが用意されています。これにより、ローカル変数の値が、それが宣言されているグローバル スコープにプロモートされ、同じ名前の既存のグローバル変数が上書きされます。

例:

  1. // 全局变量
  2. $primary-color: #3498db;
  3. .button {
  4. // 局部变量,覆盖全局变量
  5. $primary-color: #cc582e;
  6. background-color: $primary-color; // 使用局部变量值
  7. }
  8. // 使用 !global 将局部变量变为全局变量
  9. $primary-color: #cddb34;
  10. .button {
  11. // 使用 !global 将局部变量变为全局变量
  12. $primary-color: #2ecc71 !global;
  13. }
  14. body {
  15. background-color: $primary-color; // 这里使用的是已变为全局的 $primary-color
  16. }

最初の例では、.button セレクター内のローカル変数 $primary-color がグローバル変数の値をオーバーライドします。 2 番目の例では、!global キーワードを使用することで、.button セレクター内のローカル変数がグローバル変数に変換され、グローバル スコープ内の変数値に影響を与えます。

入れ子の構文

セレクターのネスト

基本的なネスト

セレクターをネストすると、子セレクターのスタイル ルールを親セレクター内にネストできます。次に例を示します。

  1. // SCSS代码
  2. .navbar {
  3. background-color: #333;
  4. padding: 10px;
  5. ul {
  6. list-style: none;
  7. margin: 0;
  8. padding: 0;
  9. li {
  10. display: inline-block;
  11. margin-right: 10px;
  12. a {
  13. text-decoration: none;
  14. color: #fff;
  15. &:hover {
  16. text-decoration: underline;
  17. }
  18. }
  19. }
  20. }
  21. }

上記のコードでは、.navbar セレクターには、ネストされた ul、li、およびサブセレクターが含まれています。この入れ子構造により、スタイル ルールがより明確になり、管理が容易になります。

ネストされた親セレクター参照 (&)

SCSS では、& 記号は親セレクターを参照するために使用され、特に擬似クラスまたは擬似要素の場合に役立ちます。たとえば、&:hover を使用して現在のセレクターの親セレクターを参照し、:hover 状態スタイルを追加します。

  1. .button {
  2. background-color: #3498db;
  3. color: #fff;
  4. padding: 8px 16px;
  5. border: none;
  6. text-align: center;
  7. text-decoration: none;
  8. display: inline-block;
  9. &:hover {
  10. background-color: #2980b9;
  11. }
  12. }

ネストに関する考慮事項
  • セレクターの深さ: スタイルの優先順位が高くなり、スタイルのオーバーライドやメンテナンスが困難になる可能性があるため、セレクターのネストが深すぎることは避けてください。
  • 読みやすさ: セレクターのネストを使用する場合は、コードを読みやすく明確に保つことに注意し、過度に複雑なネスト構造を避けてください。
  • パフォーマンス: ネストされた構造により、生成される CSS ファイルのサイズが増加する可能性がありますが、通常は適切なスタイル構成と記述により最適化できます。
ネストされた

SCSS では、次のような複数レベルのセレクターのネストが可能です。

  1. .container {
  2. .row {
  3. .col {
  4. width: 100%;
  5. }
  6. }
  7. }

プロパティのネスト

SCSS には、セレクターのネストに加えて、属性のネスト機能もあります。これは、スタイルシートをよりクリーンで管理しやすくするもう 1 つの機能です。プロパティのネストにより、オブジェクトのフォームと同様に、関連するプロパティをまとめて編成できます。

基本的な属性のネスト

プロパティのネストを使用すると、コード ブロック内に関連するプロパティを配置できます。次に例を示します。

  1. .navbar {
  2. font: {
  3. family: Arial, sans-serif;
  4. size: 16px;
  5. weight: bold;
  6. }
  7. margin: {
  8. top: 10px;
  9. bottom: 15px;
  10. }
  11. padding: {
  12. left: 20px;
  13. right: 20px;
  14. }
  15. }

上の例では、フォント、マージン、およびパディングのブロックに関連する属性が含まれています。この構成により、各ブロック内のプロパティがより明確になり、変更や保守が容易になります。

ネストに関する考慮事項
  • サポートされているプロパティ: すべての CSS プロパティがネストをサポートしているわけではありません。通常は、フォント、マージン、パディング、ボーダーなどのキーと値のペアを受け入れることができるプロパティです。
  • 可読性: 属性のネストを使用する場合は、コードの可読性と明瞭さを確保し、過度のネストや複雑な構造を避けてください。
  • ネストされたネスト: プロパティ ネスト内に他のプロパティをネストすることもでき、これによりスタイルをさらに整理および構造化できます。

継承する

SCSS では、継承 (拡張) は、あるセレクターが別のセレクターのスタイル ルールを継承できるようにする非常に便利な機能です。この機能により、重複する CSS コードが削減され、スタイルシートがよりモジュール化され、保守が容易になります。

基本的な使い方

セレクターの継承は、@extend キーワードを使用して実現できます。例えば:

  1. %message-shared {
  2. border: 1px solid #ccc;
  3. padding: 10px;
  4. color: #333;
  5. }
  6. .success-message {
  7. @extend %message-shared;
  8. background-color: lightgreen;
  9. }
  10. .error-message {
  11. @extend %message-shared;
  12. background-color: lightcoral;
  13. }

上記の例では、%message-shared はプレースホルダー セレクター (Placeholder Selector) であり、共通のスタイル セットを定義します。 .success-message と .error-message は、それぞれ %message-shared のスタイルを継承し、独自の背景色を追加します。

継承に関する注意事項

  • セレクターの順序: 継承によりセレクターの長いリストが生成される可能性があり、スタイルの優先順位に影響を与える可能性があります。 @extend を使用する場合は、不要な優先順位の問題を避けるために、セレクターの順序と位置が正しいことを確認してください。
  • 制限事項: 継承されたセレクターは、継承されたセレクターの後に出現する必要があります。これは、SCSS ファイルでセレクターを定義し、@extend を使用して後続のコードでそのスタイルを継承する場合、この継承は定義後にのみ有効になることを意味します。
  • プレースホルダー セレクターとクラス セレクター: % で始まるプレースホルダー セレクターは、コンパイル後に冗長なセレクターを生成しないため、一般に直接クラス セレクターよりも継承の対象として適しています。クラス セレクターは、使用されるすべての場所で重複したスタイルを生成するため、ファイル サイズと複雑さが増加します。

アプリケーションシナリオ

継承は、ボタン コンポーネントやメッセージ ボックスなど、共通の特性を持つセレクターに特に適しています。継承により、コードをクリーンで保守しやすく保ちながら、同じスタイル ルールをさまざまなシナリオで再利用できます。

要約すると、SCSS の継承は、スタイルの重複を回避し、コードのモジュール性と明確さを維持するのに役立つ強力なツールです。ただし、それを使用する場合は、セレクターの順序と位置、および合理的なものに注意する必要があります。プレースホルダーを使用して効果を最大化します。

プレースホルダー%

プレースホルダー % は、継承できるが実際の CSS 出力を生成しないスタイル ルールを定義するためによく使用される SCSS の特別なセレクターです。具体的には:

プレースホルダーを定義する

  1. %placeholder-selector {
  2. // 样式规则
  3. }

上記の例では、%placeholder-selector は % で始まるプレースホルダー セレクターです。一連のスタイル ルールを定義しますが、対応するセレクター名はコンパイルされた CSS には表示されません。

継承プレースホルダ

  1. .some-class {
  2. @extend %placeholder-selector;
  3. // 可选的额外样式
  4. }

@extend キーワードを使用すると、.some-class が %placeholder-selector のスタイルを継承できます。これは、.some-class が %placeholder-selector で定義されたすべてのスタイル ルールを適用し、対応する CSS 出力を生成することを意味します。

利点と適用可能なシナリオ

  • 重複の削減: プレースホルダー セレクターを使用すると、共通のスタイル ルールのセットを定義し、必要に応じて継承を通じてそれらを再利用できるため、コードの重複を回避できます。
  • モジュール性: プレースホルダー セレクターは、特に大規模なプロジェクトにおいて、コードのモジュール性と保守性に貢献し、スタイルシートの構造の明確さを向上させることができます。
  • 冗長性を回避する: クラス セレクターを使用する場合と比較して、プレースホルダー セレクターは冗長なセレクターを生成しないため、CSS ファイルのサイズが削減されます。

予防

  • 順序と位置: @extend を使用してプレースホルダー セレクターを継承する場合、セレクターが使用される前に継承されたプレースホルダー セレクターを定義する必要があります。そうしないと、予期しないスタイル階層の問題が発生する可能性があります。
  • 混合: プレースホルダー セレクターと通常のクラス セレクターを組み合わせることができますが、予期しない CSS 出力を避けるために慎重に扱う必要があります。

要約すると、プレースホルダー セレクター% は、不必要な CSS の冗長性を削減しながら、開発者がスタイル シートの再利用性と保守性を向上させるのに役立つ SCSS の強力なツールです。

ミックス @mixin

ミックスインは、SCSS のもう 1 つの非常に強力な機能で、スタイル ルールのセットを再利用可能なコード ブロックにカプセル化して、必要なときにどこでも参照できるようにします。プレースホルダー セレクター % とは異なり、ミックスインは CSS 出力を直接生成できるため、同じスタイルを複数の場所で使用する必要がある状況に適しています。

ミックスを定義する

  1. @mixin mixin-name($parameter1, $parameter2, ...) {
  2. // 样式规则使用参数
  3. }

上の例では、 @mixin キーワードは、複数の引数 (必要な場合) を受け入れることができる mixin-name という名前のミックスインを定義し、その中に一連のスタイル ルールを定義します。

コールミックス

  1. .some-class {
  2. @include mixin-name(value1, value2, ...);
  3. // 可选的额外样式
  4. }

@include キーワードを使用してセレクターでミックスインを呼び出し、それにパラメーターを渡します。このように、.some-class はミックスインで定義されたスタイル ルールを適用し、渡されたパラメーター値を対応するパラメーター変数に適用します。

  1. @mixin button-style($background-color, $text-color) {
  2. display: inline-block;
  3. padding: 10px 20px;
  4. border: none;
  5. border-radius: 4px;
  6. background-color: $background-color;
  7. color: $text-color;
  8. text-align: center;
  9. text-decoration: none;
  10. font-size: 16px;
  11. cursor: pointer;
  12. transition: background-color 0.3s ease;
  13. &:hover {
  14. background-color: darken($background-color, 10%);
  15. }
  16. }
  17. .button-primary {
  18. @include button-style(#3498db, #fff);
  19. }
  20. .button-secondary {
  21. @include button-style(#2ecc71, #fff);
  22. }

 

利点と適用可能なシナリオ

  • 柔軟性: ミキシングによりパラメーターを渡すことができ、必要に応じてさまざまなスタイルの出力を動的に生成できるため、スタイルがより柔軟でカスタマイズ可能になります。
  • 可読性: よく使用されるスタイル ルールをミックスインにカプセル化すると、特に同じスタイルが複数の場所で必要な場合に、コードの可読性と保守性が向上します。
  • 再利用性: 同じミックスを異なるセレクターやファイルで複数回呼び出すことができるため、スタイルの繰り返し定義を避け、コードの量を減らすことができます。

予防

  • 名前の競合: 予期しないスタイルのオーバーライドやエラーを避けるために、ミックスインが既存の CSS クラス名または他のミックスインと競合しないようにしてください。
  • パラメーターの受け渡し: ミックスインを呼び出すときは、コンパイル エラーや予期しない動作を避けるために、パラメーターのタイプと渡される順序がミックスイン定義の要件と一致していることを確認してください。
  • パフォーマンスへの影響: ミックスインを多用すると、生成される CSS ファイルのサイズが増加する可能性があるため、パフォーマンスへの影響には注意してください。

要約すると、mix @mixin は、SCSS でスタイル ルールをカプセル化して再利用するための強力なツールであり、CSS の保守性と柔軟性を大幅に向上させることができ、さまざまな複雑で繰り返しのスタイル要件に適しています。

SCSS は条件ステートメントを使用します

SCSS では、条件ステートメントを使用して、特定の条件に基づいて CSS スタイルを動的に生成できます。 SCSS の条件ステートメントは、@if、@else if、@else などの他のプログラミング言語の条件ステートメントに似ています。

@if ステートメント

@if ステートメントを使用すると、条件に基づいてスタイルを生成できます。構文は次のとおりです。

  1. $use-rounded-corners: true;
  2. .button {
  3. @if $use-rounded-corners {
  4. border-radius: 4px;
  5. }
  6. }

上記の例では、$use-rounded-corners 変数の値が true の場合、border-radius: 4px; を含む .button クラスのスタイルが生成されます。条件が false の場合、スタイルのこの部分は生成されません。

@else および @else if ステートメント

@if に加えて、@else if および @else を使用してさらに条件分岐を追加することもできます。

  1. $button-size: medium;
  2. .button {
  3. @if $button-size == small {
  4. padding: 5px 10px;
  5. } @else if $button-size == medium {
  6. padding: 10px 25px;
  7. } @else if $button-size == large {
  8. padding: 15px 30px;
  9. } @else {
  10. padding: 10px 20px; // 默认值
  11. }
  12. }

この例では、$button-size 変数の値に応じて、.button クラスに適用される異なるパディング値が選択されます。一致する条件がない場合は、@else のコード ブロックが実行されます。

条件文の入れ子

条件ステートメントをネストして、より複雑なロジックを処理することもできます。

  1. $button-style: flat;
  2. $button-size: medium;
  3. .button {
  4. @if $button-style == flat {
  5. background-color: transparent;
  6. color: #333;
  7. border: 1px solid #333;
  8. @if $button-size == small {
  9. padding: 5px 10px;
  10. } @else if $button-size == medium {
  11. padding: 10px 25px;
  12. } @else if $button-size == large {
  13. padding: 15px 30px;
  14. } @else {
  15. padding: 10px 20px; // 默认值
  16. }
  17. } @else if $button-style == raised {
  18. background-color: #3498db;
  19. color: #fff;
  20. padding: 10px 20px;
  21. border-radius: 4px;
  22. } @else {
  23. // 默认样式
  24. background-color: #db6334;
  25. color: #fff;
  26. padding: 10px 20px;
  27. }
  28. }

この例では、$button-style と $button-size の値に基づいて、適用するさまざまなスタイルが選択されます。このネストされたアプローチにより、複数の条件に基づいて複雑なスタイル ルールを生成できます。

結論は

条件ステートメントを使用すると、SCSS でより柔軟かつ動的なスタイル定義を実現し、さまざまな条件に基づいてさまざまな CSS ルールを生成できるため、スタイル シートの保守性と拡張性が向上します。

SCSS の 3 種類のループ

SCSS には、繰り返し CSS ルールを生成するために使用できる 3 つの主要なループ構造 (@for、@each、および @while) があります。

@forループ

@for ループは、特定の手順と条件に従ってスタイルを繰り返し生成するために使用されます。

基本的な文法

  1. @for $i from <start> through <end> {
  2. // 循环体
  3. }
  • から<start>を通して<end> :ループの開始値と終了値(終了値を含む)を指定します。
  • $i 変数をループ本体で使用して、現在のループのインデックス値を表すことができます。

  1. @for $i from 1 through 3 {
  2. .item-#{$i} {
  3. width: 100px * $i;
  4. }
  5. }

上記の例では、幅がそれぞれ 100px、200px、300px に設定された 3 つのクラス .item-1、.item-2、および .item-3 が生成されます。

@各ループ

@each ループは、リストまたはマップ タイプのデータを走査し、各要素のスタイルを生成するために使用されます。

基本的な文法

  1. @each $var in <list or map> {
  2. // 循环体
  3. }
  • $var: 現在のループの変数を表します。
  • <list or map>: リスト ($list: item1, item2, item3; など) またはマップ (キーと値のペア) を指定できます。

  1. $colors: (red, green, blue);
  2. @each $color in $colors {
  3. .text-#{$color} {
  4. color: $color;
  5. }
  6. }

 

この例では、.text-red、.text-green、.text-blue の 3 つのクラスが生成され、それらのテキストの色が対応する色の値に設定されます。

@while ループ

@while ループは、条件が満たされなくなるまで、条件に基づいてスタイルを繰り返し生成します。

基本的な文法

  1. $i: 1;
  2. @while $i < 4 {
  3. // 循环体
  4. $i: $i + 1; // 更新条件
  5. }
  • $i: ループカウンターまたは条件変数として。
  • ループ本体内では任意の SCSS コードを実行できます。無限ループを避けるために、通常はループ本体の最後で条件変数を更新する必要があります。

  1. $i: 1;
  2. @while $i < 4 {
  3. .item-#{$i} {
  4. width: 100px * $i;
  5. }
  6. $i: $i + 1;
  7. }

このコードは 3 つのクラス .item-1、.item-2、および .item-3 を生成し、それらの幅をそれぞれ 100px、200px、および 300px に設定します。

要約する

3 つの SCSS ループ構造 @for、@each、@while は、インデックスによるループ、リストまたはマップ タイプのデータの走査、および条件付きループに基づいたスタイルの生成にそれぞれ使用されます。これらのループ構造により、SCSS はより強力かつ柔軟になり、ニーズに応じて複雑な CSS ルールを生成できます。

カスタム機能と使い方

SCSS では、パラメータを受け入れ、処理された値を返すカスタム関数を使用してスタイル シートを拡張できます。

カスタム関数を定義する

SCSS では、@function キーワードを使用して関数を定義します。関数にはパラメータと戻り値を含めることができます。たとえば、要素のボックス モデルの合計幅を計算する関数を定義します。

  1. @function total-width($padding, $border, $margin, $content-width) {
  2. @return $padding + $border + $margin + $content-width;
  3. }

上の例では:

  • total-width は関数の名前です。
  • この関数は、$padding、$border、$margin、$content-width の 4 つのパラメーターを受け入れます。
  • @return ステートメントは、計算された値を返すために使用されます。

カスタム関数を使用する

関数を定義すると、その関数をスタイルで使用して必要な値を計算および生成できます。例えば:

  1. .element {
  2. width: total-width(10px, 1px, 5px, 100px);
  3. }

 

この例では、total-width 関数がパラメーター 10px、1px、5px、および 100px で呼び出されます。関数によって返された結果 (116px) は、.element の width プロパティに適用されます。

予防

  • 関数は任意の SCSS ファイルに含めることができ、他のスタイル ルールと同様に整理してインポートできます。
  • 制御ステートメント (@if、@for、@each、@while など) や組み込み関数など、SCSS のすべての機能を関数で使用できます。
  • 関数のパラメータには、数値、文字列、色などを含む任意の SCSS データ型を使用できます。

宿題

SCSS を使用してページの白黒テーマを切り替える

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="stylesheet" href="main.css">
  7. <title>黑白色主题切换</title>
  8. </head>
  9. <body>
  10. <div class="container">
  11. <button id="theme-toggle">切换主题</button>
  12. <div class="box">
  13. <div class="content">
  14. <p>这是一些文本内容。</p>
  15. <p>这是一些文本内容。</p>
  16. <p>这是一些文本内容。</p>
  17. <p>这是一些文本内容。</p>
  18. <p>这是一些文本内容。</p>
  19. <p>这是一些文本内容。</p>
  20. <p>这是一些文本内容。</p>
  21. </div>
  22. </div>
  23. </div>
  24. <script src="main.js"></script>
  25. </body>
  26. </html>

SCSS

  1. // 定义轻主题的样式变量
  2. $light-theme: (
  3. background-color: white,
  4. text-color: black,
  5. highlight-color: #f0f0f0
  6. );
  7. // 定义暗主题的样式变量
  8. $dark-theme: (
  9. background-color: black,
  10. text-color: white,
  11. highlight-color: #333333
  12. );
  13. // 定义一个混合(mixin)来应用主题样式
  14. // 参数 $theme: 要应用的主题,是一个包含背景色、文本颜色和高亮颜色的映射(map)
  15. @mixin theme($theme) {
  16. background-color: map-get($theme, background-color);
  17. color: map-get($theme, text-color);
  18. // 为 .box 类应用主题的高亮颜色
  19. .box {
  20. background-color: map-get($theme, highlight-color);
  21. }
  22. }
  23. // 应用轻主题样式到 body 元素,并添加过渡效果
  24. body {
  25. @include theme($light-theme);
  26. transition: all 0.3s ease;
  27. }
  28. // 为 body 的 dark 类应用暗主题样式
  29. body.dark {
  30. @include theme($dark-theme);
  31. }
  32. // 设置容器的文本居中和顶部间距
  33. .container {
  34. text-align: center;
  35. margin-top: 20px;
  36. }
  37. // 配置主题切换按钮的样式
  38. #theme-toggle {
  39. padding: 10px 20px;
  40. cursor: pointer;
  41. border: none;
  42. outline: none;
  43. background-color: #007bff;
  44. color: white;
  45. font-size: 16px;
  46. border-radius: 5px;
  47. }
  48. // 鼠标悬停在主题切换按钮上时改变背景色
  49. #theme-toggle:hover {
  50. background-color: #0056b3;
  51. }
  52. // 定义 .box 类的基本样式和过渡效果
  53. .box {
  54. margin: 20px auto;
  55. padding: 20px;
  56. width: 50%;
  57. border: 1px solid #ccc;
  58. transition: all 0.3s ease;
  59. // 内容区域的样式配置
  60. .content {
  61. p {
  62. margin: 10px 0;
  63. }
  64. }
  65. }

js

  1. /**
  2. * 为主题切换按钮添加点击事件监听器
  3. * 当按钮被点击时,切换文档主体的黑暗主题样式
  4. *
  5. * 该函数通过toggle方法动态切换body元素的'dark'类,从而实现主题的切换。
  6. * 如果body已经应用了'dark'类,那么点击按钮将移除这个类,反之亦然。
  7. * 这种方式允许用户在黑暗主题和默认主题之间自由切换。
  8. */
  9. document.getElementById('theme-toggle').addEventListener('click', () => {
  10. document.body.classList.toggle('dark');
  11. });