sass變數的宣告：

通過 $ 宣告變數 ， $ 後邊的就是變數的名字， 比如：$wd;宣告變數後需要給變數賦值 ,比如 $wd:200px

變數的命名規則：

• 變數名都是自定義的

• 變數名可以使用字母，_ 作為開頭，後邊可以使字母，數字，_ , - 的組合，比如：$wd:100px $_ht:100px $width-html:29px $top1:20px

• 變數名區分大小寫

變數的資料型別：

SassScript 支援6種主要的資料型別：

1. 數字 1， 2， 13， 10px
2. 字串，有引號字串與無引號字串，"foo", 'bar', baz
3. 顏色， blue, #04a3f9, rgba(255,0,0,0.5)
4. 布林型， true, false
5. 空值， null
6. 陣列（list）， 用空格或逗號作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
7. maps， 相當於 JavaScript 的 object，(key1: value1, key2: value2)

注意： 變數名是 中劃線 還是 下劃線

sass並不想強迫任何人一定使用中劃線或下劃線，所以這兩種用法相互相容。用中劃線宣告的變數可以使用下劃線的方式引用，反之亦然。

scss示例：

$wd:200px;
$ht:200px;
$top:top;
$line-height:200px;

.box{
    width: $wd;
    height: $ht;
    background-color: pink;
    line-height: $line-height;
    border-#{$top}:5px solid green ;
}
 

運算：

運算子：+ - * /

注： 乘除運算時單位也會進行運算。

​ 顏色也可以參與運算。

scss程式碼示例：

// 定義變數
$wd:200px;
$ht:200px;
$len:10;
$col:#123;
$ft:10px;
.box{
    width: $wd;
    height: $ht;
    background-color: #123+red;
    font-size: $ft + 20px;
    border: $wd / $len dotted rgb(24, 241, 151) - rgb(38, 117, 196);
    color: $col * 7;
    border-top: 10px  solid (#999 / #333);
}
 

轉換css後：

.box {
  width: 200px;
  height: 200px;
  background-color: #ff2233;
  font-size: 30px;
  border: 20px dotted #007c00;
  color: #77eeff;
  border-top: 10px solid #030303;
}
/*# sourceMappingURL=04-sassoperation.css.map */

效果：

運算注意事項：

除法運算比較特殊：

/ 在 CSS 中通常起到分隔數字的用途，SassScript 作為 CSS 語言的拓展當然也支援這個功能，同時也賦予了 / 除法運算的功能。

也就是說，如果 / 在 SassScript 中把兩個數字分隔，編譯後的 CSS 檔案中也是同樣的作用。

以下三種情況 / 將被視為除法運算子號：

1.如果值，或值的一部分，是變數或者函式的返回值
2.如果值被圓括號包裹
3.如果值是算數表示式的一部分

// 定義變數
$wd:200px;
$ht:200px;
$len:10;
$col:#123;
$ft:10px;
$size:300px;
.box{
    width: $wd;
    height: $ht;
    background-color: #123+red;
    /* 值被圓括號包裹*/
    font-size: (600px / 20);

    /* 值是變數或者函式的返回值*/
    font-size: $size / $len;

    /* 值是算數表示式一部分*/
    font-size: $size / 10;
}

如果需要使用變數，同時又要確保/不做除法運算而是完整地編譯到 CSS 檔案中，只需要用 #{} 插值語句將變數包裹。

    // 使用變數同時，不做除法運算
    font-size: #{$size} / $ht;