DIV CSS 佈局教程網

在Sass中，共有3種運算情況：（1）數字運算；（2）字符運算；（3）顏色運算。

一、數字運算

在Sass中，共有4種數字運算方式：加、減、乘、除。對於這4種運算方式，我們需要注意以下幾點：

• （1）在Sass加法中，數值可以帶單位，但是需要運算單位相同，如果不相同則編譯不通過；
• （2）在Sass減法中，數值可以帶單位，但是需要運算單位相同，如果不相同則編譯不通過；
• （3）在Sass乘法中，只能有一個數值帶單位，另外一個數值只能是不帶單位的數字。如果兩個都是帶單位的數字，則Sass會報錯而編譯不通過；
• （4）在Sass除法中，由於“/”在CSS中已經作為一種符號來使用了，所以我們需要在外面添加一個“小括號()”；

在實際開發中，不管是加法、減法，還是乘法、除法運算，我們都建議在外面加上小括號。這種書寫方式，能夠使得代碼一目了然，也方便維護。希望小伙伴們也規范一下自己的書寫方式。

二、字符運算

在Sass中，我們可以使用“+”（加號）來實現字符串的拼接。其中，結果字符串是否有引號，取決於左邊字符串是否有引號。

舉例：

 
div::before
{
    content: "Welcome to " + lvyestudy;
    font:sans- + "serif";
}

編譯出來的CSS代碼如下：

 
div::before 
{
    content: "Welcome to lvyestudy";
    font: sans-serif;
}

三、顏色運算

在Sass中，我們也是可以對顏色值進行運算的。顏色運算支持加、減、乘、除，並且是分段進行計算的。也就是說，紅、綠、藍這3個部分的顏色是單獨進行計算的。

此外，如果顏色值不是十六進制顏色值（如#010203），而是RGB或者HSL的話，我們都是將RGB或HSL先轉換為十六進制顏色值，然後再進行加、減、乘、除運算的。

舉例：

 
div
{
    color: (#010203 + #040506);
}

編譯出來的CSS代碼如下：

 
div
{
    color: #050709;
}