SASS - 演算子

著作権：著作権、許可なく複製禁止！https://blog.csdn.net/weixin_43031412/article/details/91492755

---

• SASS - はじめに
• SASS - 環境を構築します
• SASS - プログラムサスを使用します
• SASS - 構文
• SASS - 変数
• SASS-ローカルファイル（部分）
• SASS - ミックス（ミックスイン）
• SASS - @extend（継承）指令
• SASS - 演算子
• SASS - 関数
• SASS - 出力フォーマット

---

この記事では、サス演算子（またはオペレータ）について説明します。加算、減算、除算を含む、等、オペレータに等しいです。

等価演算子

サポートされているすべてのデータ型は、オペレータに等しいです：

==	等しいです
!=	等しくありません

等価演算子に加えて、各データ型はまた、オペレータのそれぞれのセットをサポートします。

数値演算子

SassScriptは、次の標準算術演算子をサポートしています。

+	プラス
-	マイナス
*	乗算
/	除きます
%	モデューロ

一つの一般的な使用は、算出算術演算子の幅です。

例えば、パーセント幅を計算する次の例：

.container { 
    width: 100%; 
}

article {
    float: left;
    width: 700px / 960px * 100%;
}

.sidebar {
    float: right;
    width: 200px / 960px * 100%;
}

CSSコードは、次の出力をコンパイル：

.container {
  width: 100%; }

article {
  float: left;
  width: 72.91667%; }

.sidebar {
  float: right;
  width: 20.83333%; }

データの操作ユニットに関与する算術演算子を使用する場合と同じでなければなりません。それ以外の場合は（PX、EMと別で、例えば）はエラーになります。

 .box-big {
        font-size:  22px + 4em; // Error: Incompatible units: 'em' and 'px'.
        width: 30% - 20px; // Error: Incompatible units: 'px' and '%'.
    }

カラーオペレータ

算術演算子は、色に適用されます。色を算出し、全体ではなく6桁のカラー値よりも、R、G、B成分を計算に関与しています。

例えば、2つの16進カラー値の和を、成分値のそれぞれに順次加えます。

例：

body {
    color: #991100 + #002299;
}

CSSコードは、次の出力をコンパイル：

body {
  color: #993399; }

オペレータはまた、色や数字にも適用することができます。例えば

body {
    color: #112233 * 2;
}

CSSコードは、次の出力をコンパイル：

body {
  color: #224466; }

文字列演算子

+オペレータは、文字列を接続するために使用することができます。

img {
  cursor: zoom + -in;
}

CSSコードは、次の出力をコンパイル：

img {
  cursor: zoom-in; }

論理演算子

サスはまた、ブール値などの演算子を使用することをサポートし、またはありません。