Sass 操作_html/css_WEB-ITnose

加算
は、これまでのところ、calc() 関数のみが使用できます。 Sass では、操作は基本的な機能の 1 つにすぎません。 Sass ではあらゆる種類の数学的計算を行うことができます。
加算演算はSassの演算の1つであり、変数や属性に対して加算演算を行うことができます。例:

1 .box {2  width: 20px + 8in;3 }

コンパイルされた CSS:

1 .box {2  width: 788px;3 }

異なるタイプの単位を運ぶ場合、次の例に示すように、Sass での計算時にエラーが報告されます。コンパイラはエラー: 「互換性のない単位: 'em' と 'px'」

Subtraction

Sass の減算演算は加算演算と似ています

1 .box {2  width: 20px + 1em;3 }

コンパイルされた CSS は次のとおりです:

1 $full-width: 960px;2 $sidebar-width: 200px;3 .content {4  width: $full-width - $sidebar-width;5 }

同様に、演算中に異なるタイプのユニットが発生した場合、コンパイルでもエラーが報告されます

乗算

Sass の乗算演算は、加算および乗算とは少し異なります。前に紹介した減算演算。複数の単位 (em、px、% など) もサポートできますが、単位が同時に 2 つの値を宣言すると問題が発生します。

1 .content {2  width: 760px;3 }

コンパイル時に「20px*px は有効な CSS 値ではありません。」というエラー メッセージが報告されます。 乗算を実行し、2 つの値の単位が同じ場合は、1 つの値に単位を指定するだけで済みます。上記の例は次のように変更できます:

1 .box {2  width:10px * 2px; 3 }

コンパイルされた CSS:

1 .box {2  width: 10px * 2;3 }

Sass の乗算演算は、演算に異なる種類の単位がある場合は、加算および減算演算と同じです。も報告されます。

次の例のように:

1 .box {2  width: 20px;3 }

コンパイル時に、「40em*px は有効な CSS 値ではありません。」というエラー メッセージが表示されます。

割り算

Sass の掛け算のルールは割り算にも適用されます。しかし、除算演算にはもう 1 つの特別な特徴があります。ご存知のとおり、

"/"

シンボルは CSS のシンボルとして使用されています。したがって、Sass で除算演算を実行する場合、「/」記号を除算記号として直接使用しても、必要な効果は得られず、コンパイル中にエラーも報告されません。簡単な例を見てみましょう:

1 .box {2  width: 20px * 2em;3 }

コンパイルされた CSS は次のとおりです:

1 .box {2  width: 100px / 2; 3 }

この問題を修正するには、操作の外側にかっこ ( ) を追加するだけです:

1 .box {2  width: 100px / 2;3 }

コンパイルされた CSS は次のとおりです。

1 .box {2  width: (100px / 2); 3 }

上記の場合の括弧に加えて、「/」記号が既存の数式内にある場合は、除算演算子としても認識されます。除算記号。

次の例のように:

1 .box {2  width: 50px;3 }

コンパイルされた CSS:

1 .box {2  width: 100px / 2 + 2in; 3 }

変数を使用して除算演算

を実行する場合、次の例に示すように、

"/" 記号も自動的に除算

として認識されます。 :

1 .box {2  width: 242px;3 }

Compiled CSS:

1 $width: 1000px;2 $nums: 10;3 .item {4  width: $width / 10; 5 }6 .list {7  width: $width / $nums;8 }

”/ ” 記号は、次の状況で除算演算子として使用されます。

• 値またはその一部が変数に格納されている場合、または関数の戻り値。

• 値が括弧で囲まれている場合。

• 値が別の数式の一部である場合。

1 .item {2  width: 100px;3 }4 .list {5  width: 100px;6 }

コンパイルされた CSS:

1 //SCSS2 p {3  font: 10px/8px; // 纯 CSS，不是除法运算4  $width: 1000px;5  width: $width/2; // 使用了变量，是除法运算6  width: round(1.5)/2; // 使用了函数，是除法运算7  height: (500px/2); // 使用了圆括号，是除法运算8  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算9 }

Sass の除算演算には別のケースがあります。乗算中に、2 つの値の単位が同じ場合、結果は必要な結果になりません。ただし、除算中に 2 つの値が同じ単位値を持つ場合、除算演算後に単位のない値が得られます。以下に示すように:

1 p {2  font: 10px/8px;3  width: 500px;4  height: 250px;5  margin-left: 9px;6 }

コンパイルされた CSS は次のとおりです:

1 .box {2  width: (1000px / 100px);3 }

変数の計算

計算用の変数サスで。

1 .box {2  width: 10;3 }

コンパイル済みCSS

1 $content-width: 720px;2 $sidebar-width: 220px;3 $gutter: 20px;4 .container {5  width: $content-width + $sidebar-width + $gutter;6  margin: 0 auto;7 }

数字运算
在 Sass 运算中数字运算是较为常见的，数字运算包括前面介绍的：加法、减法、乘法和除法等运算。而且还可以通过括号来修改他们的运算先后顺序。和我们数学运算是一样的，

示例：

1 .box {2  width: ((220px + 720px) - 11 * 20 ) / 12 ; 3 }

编译出来的 CSS:

1 .box {2  width: 60px;3 }

颜色运算
所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。如：

1 p {2  color: #010203 + #040506;3 }

计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为：
如此编译出来的 CSS 为：

1 p {2  color: #050709;3 }

算数运算也能将数字和颜色值 一起运算，同样也是分段运算的。如：

1 p {2  color: #010203 * 2;3 }

计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 并且被合成为：

1 p {2  color: #020406;3 }

字符运算

1 $content: "Hello" + "" + "Sass!";2 .box:before {3  content: " #{$content} ";4 }

编译出来的CSS：

1 .box:before {2  content: " Hello Sass! ";3 }

除了在变量中做字符连接运算之外，还可以直接通过 +，把字符连接在一起：

1 div {2  cursor: e + -resize;3 }

注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。 例如：

1 p:before {2  content: "Foo " + Bar;3  font-family: sans- + "serif";4 }

编译出来的 CSS：

1 p:before {2  content: "Foo Bar";3  font-family: sans-serif; 4 }