プライベートな連絡先の最初の情報
送料メール:
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
目次
SCSS (Sassy CSS) は CSS のプリプロセッサ言語であり、CSS に基づいてより多くの機能と柔軟性を提供し、スタイル シートの作成と管理をより効率的かつ便利にします。
SCSS の利点は次のとおりです。
要約すると、SCSS は CSS のすべての機能を保持するだけでなく、変数、ネスト、混合、インポートなどの高度な機能も導入しています。これらの機能により、開発者はスタイル シートをより効率的に作成および管理できるようになり、最新のフロントエンドで一般的に使用されています。ツールの 1 つを終了します。
文法:
読みやすさと保守性:
機能拡張:
互換性:
学習曲線:
要約すると、通常の CSS と比較して、SCSS はスタイル シートの作成とメンテナンスを簡素化するためのツールと機能が多く提供されており、大規模で複雑なプロジェクトの開発に特に適しています。ただし、小規模なプロジェクトや単純なスタイル設定が必要な場合は、プレーン CSS の方が簡単で便利な場合があります。
scss を学習する前に、まず vscode に 2 つのプラグインをインストールして、その後の学習のために scss を通常の CSS ファイルに変換します。
プラグインストアでsassを検索し、以下の2つのプラグインをダウンロードしてvscodeを再起動してください。
SCSS での変数の宣言は非常に簡単で、$ 記号を使用して変数を定義できます。
以下は、SCSS で変数を宣言して使用する方法を示す簡単な例です。
- // 定义变量
- $primary-color: #3498db;
- $secondary-color: #2ecc71;
-
- // 使用变量
- body {
- background-color: $primary-color;
- }
-
- a {
- color: $secondary-color;
- }
上の例では、2 つの変数 $primary-color と $Secondary-color を定義して、それぞれ原色と二次色を格納しました。これらの変数をスタイル ルールで使用すると、スタイル シート全体で色の一貫性を保ち、簡単に変更できます。
SCSS ファイルが通常の CSS ファイルにコンパイルされると、すべての変数が対応する値に置き換えられるため、最終的に生成される CSS ファイルには変数宣言が含まれません。
SCSS では、デフォルト変数を使用して、変数が定義されていない場合に代替値を確実に持つことができます。これは、テーマを操作したり、スタイルを構成したりするときに特に便利です。
デフォルト変数を宣言して使用する方法の例を次に示します。
- // 声明变量,并设置默认值
- $primary-color: #3498db !default;
- $secondary-color: #2ecc71 !default;
-
- // 使用变量
- body {
- background-color: $primary-color;
- }
-
- a {
- color: $secondary-color;
- }
上の例では、!default タグを使用してデフォルト値を定義しました。これは、$primary-color または $ Secondary-color が SCSS ファイルに導入される前に他の場所で定義されていない場合、指定されたデフォルト値 (#3498db および #2ecc71) が使用されることを意味します。ファイルをインポートする前にこれらの変数が定義されている場合、デフォルト値は無視されます。
デフォルト変数を使用する利点は、すでに定義されている変数を上書きせずに、変数に代替値を提供できることです。これは、テーマを作成したり、複数のスタイル ファイル間で変数を共有したりする場合に特に便利です。
注: ローカル変数はグローバル変数をオーバーライドします
グローバル変数と同じ名前の変数がローカル スコープで再宣言されると、ローカル変数によってグローバル変数の値が上書きされます。これにより、グローバルな状況に影響を与えることなく、特定のセレクターまたはミキサーに対してさまざまな変数値を定義できます。
!global キーワードを使用してローカル変数をグローバル変数に変換します
SCSS には、ローカル変数をグローバル変数として明示的に宣言するための !global キーワードが用意されています。これにより、ローカル変数の値が、それが宣言されているグローバル スコープにプロモートされ、同じ名前の既存のグローバル変数が上書きされます。
例:
- // 全局变量
- $primary-color: #3498db;
-
- .button {
- // 局部变量,覆盖全局变量
- $primary-color: #cc582e;
- background-color: $primary-color; // 使用局部变量值
- }
-
- // 使用 !global 将局部变量变为全局变量
- $primary-color: #cddb34;
-
- .button {
- // 使用 !global 将局部变量变为全局变量
- $primary-color: #2ecc71 !global;
- }
-
- body {
- background-color: $primary-color; // 这里使用的是已变为全局的 $primary-color
- }
最初の例では、.button セレクター内のローカル変数 $primary-color がグローバル変数の値をオーバーライドします。 2 番目の例では、!global キーワードを使用することで、.button セレクター内のローカル変数がグローバル変数に変換され、グローバル スコープ内の変数値に影響を与えます。
セレクターをネストすると、子セレクターのスタイル ルールを親セレクター内にネストできます。次に例を示します。
- // SCSS代码
- .navbar {
- background-color: #333;
- padding: 10px;
-
- ul {
- list-style: none;
- margin: 0;
- padding: 0;
-
- li {
- display: inline-block;
- margin-right: 10px;
-
- a {
- text-decoration: none;
- color: #fff;
-
- &:hover {
- text-decoration: underline;
- }
- }
- }
- }
- }
上記のコードでは、.navbar セレクターには、ネストされた ul、li、およびサブセレクターが含まれています。この入れ子構造により、スタイル ルールがより明確になり、管理が容易になります。
SCSS では、& 記号は親セレクターを参照するために使用され、特に擬似クラスまたは擬似要素の場合に役立ちます。たとえば、&:hover を使用して現在のセレクターの親セレクターを参照し、:hover 状態スタイルを追加します。
- .button {
- background-color: #3498db;
- color: #fff;
- padding: 8px 16px;
- border: none;
- text-align: center;
- text-decoration: none;
- display: inline-block;
-
- &:hover {
- background-color: #2980b9;
- }
- }
SCSS では、次のような複数レベルのセレクターのネストが可能です。
- .container {
- .row {
- .col {
- width: 100%;
- }
- }
- }
SCSS には、セレクターのネストに加えて、属性のネスト機能もあります。これは、スタイルシートをよりクリーンで管理しやすくするもう 1 つの機能です。プロパティのネストにより、オブジェクトのフォームと同様に、関連するプロパティをまとめて編成できます。
プロパティのネストを使用すると、コード ブロック内に関連するプロパティを配置できます。次に例を示します。
- .navbar {
- font: {
- family: Arial, sans-serif;
- size: 16px;
- weight: bold;
- }
- margin: {
- top: 10px;
- bottom: 15px;
- }
- padding: {
- left: 20px;
- right: 20px;
- }
- }
上の例では、フォント、マージン、およびパディングのブロックに関連する属性が含まれています。この構成により、各ブロック内のプロパティがより明確になり、変更や保守が容易になります。
SCSS では、継承 (拡張) は、あるセレクターが別のセレクターのスタイル ルールを継承できるようにする非常に便利な機能です。この機能により、重複する CSS コードが削減され、スタイルシートがよりモジュール化され、保守が容易になります。
セレクターの継承は、@extend キーワードを使用して実現できます。例えば:
- %message-shared {
- border: 1px solid #ccc;
- padding: 10px;
- color: #333;
- }
-
- .success-message {
- @extend %message-shared;
- background-color: lightgreen;
- }
-
- .error-message {
- @extend %message-shared;
- background-color: lightcoral;
- }
上記の例では、%message-shared はプレースホルダー セレクター (Placeholder Selector) であり、共通のスタイル セットを定義します。 .success-message と .error-message は、それぞれ %message-shared のスタイルを継承し、独自の背景色を追加します。
継承は、ボタン コンポーネントやメッセージ ボックスなど、共通の特性を持つセレクターに特に適しています。継承により、コードをクリーンで保守しやすく保ちながら、同じスタイル ルールをさまざまなシナリオで再利用できます。
要約すると、SCSS の継承は、スタイルの重複を回避し、コードのモジュール性と明確さを維持するのに役立つ強力なツールです。ただし、それを使用する場合は、セレクターの順序と位置、および合理的なものに注意する必要があります。プレースホルダーを使用して効果を最大化します。
プレースホルダー % は、継承できるが実際の CSS 出力を生成しないスタイル ルールを定義するためによく使用される SCSS の特別なセレクターです。具体的には:
- %placeholder-selector {
- // 样式规则
- }
上記の例では、%placeholder-selector は % で始まるプレースホルダー セレクターです。一連のスタイル ルールを定義しますが、対応するセレクター名はコンパイルされた CSS には表示されません。
- .some-class {
- @extend %placeholder-selector;
- // 可选的额外样式
- }
@extend キーワードを使用すると、.some-class が %placeholder-selector のスタイルを継承できます。これは、.some-class が %placeholder-selector で定義されたすべてのスタイル ルールを適用し、対応する CSS 出力を生成することを意味します。
要約すると、プレースホルダー セレクター% は、不必要な CSS の冗長性を削減しながら、開発者がスタイル シートの再利用性と保守性を向上させるのに役立つ SCSS の強力なツールです。
ミックスインは、SCSS のもう 1 つの非常に強力な機能で、スタイル ルールのセットを再利用可能なコード ブロックにカプセル化して、必要なときにどこでも参照できるようにします。プレースホルダー セレクター % とは異なり、ミックスインは CSS 出力を直接生成できるため、同じスタイルを複数の場所で使用する必要がある状況に適しています。
- @mixin mixin-name($parameter1, $parameter2, ...) {
- // 样式规则使用参数
- }
上の例では、 @mixin キーワードは、複数の引数 (必要な場合) を受け入れることができる mixin-name という名前のミックスインを定義し、その中に一連のスタイル ルールを定義します。
- .some-class {
- @include mixin-name(value1, value2, ...);
- // 可选的额外样式
- }
@include キーワードを使用してセレクターでミックスインを呼び出し、それにパラメーターを渡します。このように、.some-class はミックスインで定義されたスタイル ルールを適用し、渡されたパラメーター値を対応するパラメーター変数に適用します。
- @mixin button-style($background-color, $text-color) {
- display: inline-block;
- padding: 10px 20px;
- border: none;
- border-radius: 4px;
- background-color: $background-color;
- color: $text-color;
- text-align: center;
- text-decoration: none;
- font-size: 16px;
- cursor: pointer;
- transition: background-color 0.3s ease;
-
- &:hover {
- background-color: darken($background-color, 10%);
- }
- }
- .button-primary {
- @include button-style(#3498db, #fff);
- }
-
- .button-secondary {
- @include button-style(#2ecc71, #fff);
- }
要約すると、mix @mixin は、SCSS でスタイル ルールをカプセル化して再利用するための強力なツールであり、CSS の保守性と柔軟性を大幅に向上させることができ、さまざまな複雑で繰り返しのスタイル要件に適しています。
SCSS では、条件ステートメントを使用して、特定の条件に基づいて CSS スタイルを動的に生成できます。 SCSS の条件ステートメントは、@if、@else if、@else などの他のプログラミング言語の条件ステートメントに似ています。
@if ステートメントを使用すると、条件に基づいてスタイルを生成できます。構文は次のとおりです。
- $use-rounded-corners: true;
-
- .button {
- @if $use-rounded-corners {
- border-radius: 4px;
- }
- }
上記の例では、$use-rounded-corners 変数の値が true の場合、border-radius: 4px; を含む .button クラスのスタイルが生成されます。条件が false の場合、スタイルのこの部分は生成されません。
@if に加えて、@else if および @else を使用してさらに条件分岐を追加することもできます。
- $button-size: medium;
-
- .button {
- @if $button-size == small {
- padding: 5px 10px;
- } @else if $button-size == medium {
- padding: 10px 25px;
- } @else if $button-size == large {
- padding: 15px 30px;
- } @else {
- padding: 10px 20px; // 默认值
- }
- }
この例では、$button-size 変数の値に応じて、.button クラスに適用される異なるパディング値が選択されます。一致する条件がない場合は、@else のコード ブロックが実行されます。
条件ステートメントをネストして、より複雑なロジックを処理することもできます。
- $button-style: flat;
- $button-size: medium;
-
- .button {
- @if $button-style == flat {
- background-color: transparent;
- color: #333;
- border: 1px solid #333;
-
- @if $button-size == small {
- padding: 5px 10px;
- } @else if $button-size == medium {
- padding: 10px 25px;
- } @else if $button-size == large {
- padding: 15px 30px;
- } @else {
- padding: 10px 20px; // 默认值
- }
- } @else if $button-style == raised {
- background-color: #3498db;
- color: #fff;
- padding: 10px 20px;
- border-radius: 4px;
- } @else {
- // 默认样式
- background-color: #db6334;
- color: #fff;
- padding: 10px 20px;
- }
- }
この例では、$button-style と $button-size の値に基づいて、適用するさまざまなスタイルが選択されます。このネストされたアプローチにより、複数の条件に基づいて複雑なスタイル ルールを生成できます。
条件ステートメントを使用すると、SCSS でより柔軟かつ動的なスタイル定義を実現し、さまざまな条件に基づいてさまざまな CSS ルールを生成できるため、スタイル シートの保守性と拡張性が向上します。
SCSS には、繰り返し CSS ルールを生成するために使用できる 3 つの主要なループ構造 (@for、@each、および @while) があります。
@for ループは、特定の手順と条件に従ってスタイルを繰り返し生成するために使用されます。
基本的な文法:
- @for $i from <start> through <end> {
- // 循环体
- }
例:
- @for $i from 1 through 3 {
- .item-#{$i} {
- width: 100px * $i;
- }
- }
上記の例では、幅がそれぞれ 100px、200px、300px に設定された 3 つのクラス .item-1、.item-2、および .item-3 が生成されます。
@each ループは、リストまたはマップ タイプのデータを走査し、各要素のスタイルを生成するために使用されます。
基本的な文法:
- @each $var in <list or map> {
- // 循环体
- }
例:
- $colors: (red, green, blue);
-
- @each $color in $colors {
- .text-#{$color} {
- color: $color;
- }
- }
この例では、.text-red、.text-green、.text-blue の 3 つのクラスが生成され、それらのテキストの色が対応する色の値に設定されます。
@while ループは、条件が満たされなくなるまで、条件に基づいてスタイルを繰り返し生成します。
基本的な文法:
- $i: 1;
- @while $i < 4 {
- // 循环体
- $i: $i + 1; // 更新条件
- }
例:
- $i: 1;
- @while $i < 4 {
- .item-#{$i} {
- width: 100px * $i;
- }
- $i: $i + 1;
- }
このコードは 3 つのクラス .item-1、.item-2、および .item-3 を生成し、それらの幅をそれぞれ 100px、200px、および 300px に設定します。
3 つの SCSS ループ構造 @for、@each、@while は、インデックスによるループ、リストまたはマップ タイプのデータの走査、および条件付きループに基づいたスタイルの生成にそれぞれ使用されます。これらのループ構造により、SCSS はより強力かつ柔軟になり、ニーズに応じて複雑な CSS ルールを生成できます。
SCSS では、パラメータを受け入れ、処理された値を返すカスタム関数を使用してスタイル シートを拡張できます。
SCSS では、@function キーワードを使用して関数を定義します。関数にはパラメータと戻り値を含めることができます。たとえば、要素のボックス モデルの合計幅を計算する関数を定義します。
- @function total-width($padding, $border, $margin, $content-width) {
- @return $padding + $border + $margin + $content-width;
- }
上の例では:
関数を定義すると、その関数をスタイルで使用して必要な値を計算および生成できます。例えば:
- .element {
- width: total-width(10px, 1px, 5px, 100px);
- }
この例では、total-width 関数がパラメーター 10px、1px、5px、および 100px で呼び出されます。関数によって返された結果 (116px) は、.element の width プロパティに適用されます。
SCSS を使用してページの白黒テーマを切り替える
html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="main.css">
- <title>黑白色主题切换</title>
- </head>
- <body>
- <div class="container">
- <button id="theme-toggle">切换主题</button>
- <div class="box">
- <div class="content">
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- <p>这是一些文本内容。</p>
- </div>
- </div>
- </div>
-
- <script src="main.js"></script>
- </body>
- </html>
SCSS
- // 定义轻主题的样式变量
- $light-theme: (
- background-color: white,
- text-color: black,
- highlight-color: #f0f0f0
- );
-
- // 定义暗主题的样式变量
- $dark-theme: (
- background-color: black,
- text-color: white,
- highlight-color: #333333
- );
-
- // 定义一个混合(mixin)来应用主题样式
- // 参数 $theme: 要应用的主题,是一个包含背景色、文本颜色和高亮颜色的映射(map)
- @mixin theme($theme) {
- background-color: map-get($theme, background-color);
- color: map-get($theme, text-color);
-
- // 为 .box 类应用主题的高亮颜色
- .box {
- background-color: map-get($theme, highlight-color);
- }
- }
-
- // 应用轻主题样式到 body 元素,并添加过渡效果
- body {
- @include theme($light-theme);
- transition: all 0.3s ease;
- }
-
- // 为 body 的 dark 类应用暗主题样式
- body.dark {
- @include theme($dark-theme);
- }
-
- // 设置容器的文本居中和顶部间距
- .container {
- text-align: center;
- margin-top: 20px;
- }
-
- // 配置主题切换按钮的样式
- #theme-toggle {
- padding: 10px 20px;
- cursor: pointer;
- border: none;
- outline: none;
- background-color: #007bff;
- color: white;
- font-size: 16px;
- border-radius: 5px;
- }
-
- // 鼠标悬停在主题切换按钮上时改变背景色
- #theme-toggle:hover {
- background-color: #0056b3;
- }
-
- // 定义 .box 类的基本样式和过渡效果
- .box {
- margin: 20px auto;
- padding: 20px;
- width: 50%;
- border: 1px solid #ccc;
- transition: all 0.3s ease;
-
- // 内容区域的样式配置
- .content {
- p {
- margin: 10px 0;
- }
- }
- }
js
- /**
- * 为主题切换按钮添加点击事件监听器
- * 当按钮被点击时,切换文档主体的黑暗主题样式
- *
- * 该函数通过toggle方法动态切换body元素的'dark'类,从而实现主题的切换。
- * 如果body已经应用了'dark'类,那么点击按钮将移除这个类,反之亦然。
- * 这种方式允许用户在黑暗主题和默认主题之间自由切换。
- */
- document.getElementById('theme-toggle').addEventListener('click', () => {
- document.body.classList.toggle('dark');
- });