SASS でどの値にも等しくない変数を設定するにはどうすればよいですか?

SASS (Syntactical Awesome Style Sheets) は、開発者の間で非常に人気のあるプリプロセッサ スクリプト言語であり、CSS の機能を強化するために使用されます。 SASS を使用すると、開発者は変数、ネスト、ミックスイン、および CSS では利用できないその他の高度な機能を使用できます。

SASS を使用する主な機能の 1 つは、変数を宣言できることです。変数は、Web アプリケーションのスタイルシート全体で再利用できる値のプレースホルダーにすぎません。変数を使用すると、コードが読みやすく保守しやすくなり、複数の値を一度に更新できるため、開発者の時間と労力を節約できます。

場合によっては、変数を空に設定したい場合があります。これは、他の言語では、変数を null または未定義に設定することを意味します。これは、プレースホルダー変数を作成し、アプリケーション内で後からその変数に値を割り当てることができる場合に便利です。この記事では、SASS で他の値と等しくない変数を設定する方法を学びます。

前提条件

SASS を HTML で実行するには、(VS Code と同様に) IDE に SASS コンパイラーがインストールされていることを確認し、次のコマンドを使用して SASS コンパイラーをダウンロードしてインストールします -

リーリー

これにより、SASS コンパイラがシステムにグローバルにインストールされます。次に、SASS コードを含む .scss 拡張子を持つ新しいファイルを作成します。

その後、SASS ファイルを HTML ファイルにインポートします。 HTML ファイルで、head セクションの「link」タグを使用して SASS ファイルへのリンクを追加します。リンクの rel 属性は「stylesheet」に設定し、その href 属性は SASS ファイルへのパスに設定する必要があります。

SASS で変数を他の値と等しくないように設定するさまざまな方法

どの値にも等しくない変数を設定するには、null キーワード、unset 関数、#{} 補間メソッドの使用など、いくつかの方法があります。これらの方法を 1 つずつ詳しく説明していきます。

方法 1: Null キーワードを使用する

SASS では、値が存在しないことを示すために null キーワードが使用されます。変数が null に設定されている場合は、その変数に値が割り当てられていないことを意味します。これは、変数を宣言したいが、すぐに値を代入したくない場合に便利です。

＃＃＃文法＃＃＃

SASS 内の他の変数と等しくないように変数を設定するには、以下に示すように null キーワードを使用します -

リーリー

あるいは、すでに null に設定されている変数に変数を代入することで、変数を null に設定することもできます。 リーリー ＃＃＃例＃＃＃

null キーワードを使用して変数をゼロに設定する方法の完全な例を見てみましょう。

HTMLコード

リーリー

SASSコード

以下は、null に等しい値を持つ変数 $newVar を宣言する SASS コードです。

リーリー

コンパイルされたCSSコード

以下は、SASS コンパイラーを使用して上記の SASS コードをコンパイルした後に生成されるコンパイル済みコードです。ドキュメント内の変更を確認するには、適切な HTML ファイルの

要素の間に次のコードを必ず追加してください。

リーリー

方法 2: Unset 関数を使用する

SASS で変数を空に設定するもう 1 つの方法は、unset 関数を使用することです。 unset 関数は変数をメモリから削除し、事実上 null に設定します。ここでは、unset 関数を使用して変数を null に設定する方法の例を示します。

上記の構文では、最初に $newVar に値 15 が割り当てられます。次に、unset 関数を使用して $newVar をメモリから削除し、事実上 null に設定します。

＃＃＃例＃＃＃

unset 関数を使用して変数を None に設定する方法の完全な例を見てみましょう。

HTMLコード

リーリー

SASSコード

以下は SASS コードです。ここでは 2 つの変数 $newVar1 と $newVar2 を宣言しており、その値はそれぞれ 15 と 12 に等しいです。ここで、unset 関数を使用して $newVar1 と $newVar2 をメモリから削除し、事実上 null に設定します。

リーリー

コンパイルされたCSSコード

以下は、SASS コンパイラーを使用して上記の SASS コードをコンパイルした後に生成されるコンパイル済みコードです。ドキュメント内の変更を確認するには、適切な HTML ファイルの

要素の間に次のコードを必ず追加してください。

リーリー

方法 3: #{} 補間を使用する

#{} 補間構文はコンパイル時に評価されるため、コンパイルされた CSS では、$newVar の結果の値は空の文字列になります。状況によってはこれが望ましくない動作になる可能性があるため、必要に応じてこの手法を慎重に使用してください。

＃＃＃文法＃＃＃ リーリー

上記の構文では、$newVar は空の文字列に設定されます。これは、内部にスペースを含む #{} 補間構文を使用して作成されます。この手法は、変数を null ではなく空の文字列に設定する必要がある場合に便利です。

＃＃＃例＃＃＃

内挿法を使用して変数を None に設定する例を見てみましょう。

HTMLコード

リーリー

SASSコード

以下は、変数 $newVar を宣言し、補間構文を使用して空の文字列に設定する SASS コードです。

$newVar: #{" "};

body {
   padding: $newVar;
   margin: $newVar;
}

ログイン後にコピー

编译的 CSS 代码

下面是在 SASS 编译器的帮助下编译上述 SASS 代码后生成的编译代码。要查看文档中的更改，请确保在相应 HTML 文件中的