數(shù)據(jù)類型

Sass包含以下幾種數(shù)據(jù)類型：
a）數(shù)字，如：1、2、13、10px;
b）字符串，有引號(hào)字符串或無引號(hào)字符串，如："foo"、"bar"、baz；
c）顏色，如：blue、#04a3f9、rgba(255, 0, 0, 0.5)；
d）布爾型，如：true、false；
e）空值，如：null；
f）值列表，用空格或逗號(hào)分開，如：1.5em, 1em, 0, 2em、Helvetica, Arial, sans-serif。

Sass也支持其他CSS屬性值，比如Uniconde范圍，或!important聲明。然而，Sass一律視為無引號(hào)字符串。

字符串

兩種字符串類型：
a）有引號(hào)字符串，如 "Lucida Grande" 、'http://sass-lang.com'；
b）無引號(hào)字符串，如 sans-serifbold。

在編譯CSS文件時(shí)不會(huì)改變其類型，只有一種情況例外，使用#{}插值語句時(shí)，有引號(hào)字符串將被編譯為無引號(hào)字符串，這樣方便了在mixin中引用選擇器名。

@mixin firefox-message($selector){
      body.firefox #{$selector}:before{
            content: "Hi, Firefox users!";  
        }
}
@include firefox-message(".header");

編譯為：

body.firefox .header:before{
    content: "Hi, Firefox user!";
}

值列表

所謂值列表是指Sass如何處理CSS中：

margin: 10px 15px 0 0

或者：

font-face: Helvetica, Arial, sans-serif

像上面這樣通過空格或逗號(hào)分隔的一系列的值。

事實(shí)上，獨(dú)立的值也被視為值列表———只包含一個(gè)值的值列表。

Sass列表函數(shù)賦予了值列表更多功能：
1.nth函數(shù)可以直接訪問值列表中的某一項(xiàng)；
2.join函數(shù)可以將多個(gè)值列表連接在一起；
3.append函數(shù)可以在值列表中添加值；
4.@each規(guī)則則能夠給值列表中耳朵每個(gè)項(xiàng)目添加樣式。

值列表中可以再包含值列表，比如 1px 2px, 5px 6px 是包含 1px 2px 與 5px 6px 兩個(gè)值列表的值列表。如果內(nèi)外兩層值列表使用相同的分隔方式，要用圓括號(hào)包裹內(nèi)層，所以也可以寫成 (1px 2px) (5px 6px)。當(dāng)值列表被編譯為 CSS 時(shí)，Sass 不會(huì)添加任何圓括號(hào)，因?yàn)?CSS 不允許這樣做。(1px 2px) (5px 6px)與 1px 2px 5px 6px 在編譯后的 CSS 文件中是一樣的，但是它們?cè)?Sass 文件中卻有不同的意義，前者是包含兩個(gè)值列表的值列表，而后者是包含四個(gè)值的值列表。

可以用 () 表示空的列表，這樣不可以直接編譯成 CSS，比如編譯 font-family: ()時(shí)，Sass 將會(huì)報(bào)錯(cuò)。如果值列表中包含空的值列表或空值，編譯時(shí)將清除空值，比如 1px 2px () 3px 或 1px 2px null 3px。

加法

加法運(yùn)算是Sass中運(yùn)算的一種，在變量或?qū)傩灾卸伎梢宰黾臃ㄟ\(yùn)算。如：

.box{
    width: 20px + 8in；
}

編譯出來的CSS：

.box{
    width: 788px;
}

但對(duì)于攜帶不同類型的單位時(shí)，在Sass中計(jì)算會(huì)報(bào)錯(cuò)，如下圖所示：

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

編譯的時(shí)候，編譯器會(huì)報(bào)錯(cuò)：

“Incompatible units: 'em' and ‘px'.”

減法

Sass的減法運(yùn)算和加法運(yùn)算類似，我們通過一個(gè)簡(jiǎn)單的示例來做闡述：

$full-width: 960px;
$sidebar-width: 200px;

.content{
    width:$full-width - $sidebar-width;
}

編譯出來的CSS如下：

.content{
    width: 760px;
}

同樣的，運(yùn)算時(shí)碰到不同類型的單位時(shí)，編譯也會(huì)報(bào)錯(cuò)，如：

$full-width: 960px;
.content{
    width: $full-width - 1em;
}

編譯的時(shí)候，編譯器報(bào)

"Incompatible units: 'em' and 'px'."

錯(cuò)誤。

乘法

Sass中的乘法雖然也能支持多種單位（比如em, px, %），但當(dāng)一個(gè)單位同時(shí)聲明兩個(gè)值時(shí)會(huì)有問題。示例：

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

編譯的時(shí)候報(bào)

"20px*px isn't a valid CSS value."

錯(cuò)誤信息。

如果進(jìn)行乘法運(yùn)算時(shí)，兩個(gè)值單位相同時(shí)，只需要為一個(gè)數(shù)值提供單位即可。上面的示例可以修改成：

.box{
    width: 10px * 2;
}

編譯出來的CSS：

.box{
      width: 20px;
}

Sass的乘法運(yùn)算和加法、減法運(yùn)算一樣，在運(yùn)算中有不同類型的單位時(shí)，也將會(huì)報(bào)錯(cuò)。示例：

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

編譯時(shí)報(bào)

"40em*px isn't a valid CSS value."

錯(cuò)誤信息。

除法

Sass 的乘法運(yùn)算規(guī)則也適用于除法運(yùn)算。不過除法運(yùn)算還有一個(gè)特殊之處。眾所周知“/”符號(hào)在 CSS 中已做為一種符號(hào)使用。因此在 Sass 中做除法運(yùn)算時(shí)，直接使用“/”符號(hào)做為除號(hào)時(shí)，將不會(huì)生效，編譯時(shí)既得不到我們需要的效果，也不會(huì)報(bào)錯(cuò)。一起先來看一個(gè)簡(jiǎn)單的示例：

.box{
    width: 100px / 2;
}

編譯出來的CSS如下：

.box{
    width: 100px / 2;
}

這樣的結(jié)果對(duì)于大家來說沒有任何意義。要修正這個(gè)問題，只需要給運(yùn)算的外面添加一個(gè)小括號(hào)"( )"即可：

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

編譯出來的CSS如下：

.box{
    width: 50px;
}

除了上面情況帶有小括號(hào)，"/"符號(hào)會(huì)當(dāng)做除法運(yùn)算符之外，如果"/"符號(hào)在已有的數(shù)學(xué)表達(dá)式中時(shí)，也會(huì)被認(rèn)作除法符號(hào)。示例：

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

編譯出來的CSS：
.box{
width: 242px;
}
另外，在Sass除法運(yùn)算中，當(dāng)變量進(jìn)行除法運(yùn)算時(shí)，"/"符號(hào)也會(huì)被自動(dòng)識(shí)別成除法，示例：

$width: 1000px;
$num: 10;

.item{
    width: $width / 10;
}
.list{
      width: $width / $nums;
}

編譯出來的CSS：

.item{
      width:100px;
}
.list{
      width: 100px;
}

綜上所述，"/"符號(hào)被當(dāng)做除法運(yùn)算符時(shí)有一下幾種情況：
a）如果數(shù)值或它的任意部分是存儲(chǔ)在一個(gè)變量中或是函數(shù)的返回值。
b）如果數(shù)值被圓括號(hào)包圍。
c）如果數(shù)值是另一個(gè)數(shù)學(xué)表達(dá)式的一部分。

如下所示：

//SCSS
p{
    font: 10px/8px;  //純CSS，不是除法運(yùn)算
    $width: 1000px;
     width: $width/2;   //使用了變量，是除法運(yùn)算
     width: round(1.5)/2;   //使用了函數(shù)， 是除法運(yùn)算
     height:(500px/2);   //使用了圓括號(hào)， 是除法運(yùn)算
     marign-left: 5px + 8px / 2px;   //使用了加(+)號(hào)， 是除法運(yùn)算
}

編譯出來的CSS

p{
    font: 10px/8px;
    width: 500px;
    height: 250px;
    margin-left: 9px;
}

Sass 的除法運(yùn)算還有一個(gè)情況。我們先回憶一下，在乘法運(yùn)算時(shí)，如果兩個(gè)值帶有相同單位時(shí)，做乘法運(yùn)算時(shí)，出來的結(jié)果并不是我們需要的結(jié)果。但在除法運(yùn)算時(shí)，如果兩個(gè)值帶有相同的單位值時(shí)，除法運(yùn)算之后會(huì)得到一個(gè)不帶單位的數(shù)值。如下所示：

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

編譯出來的CSS如下：

.box{
    width: 10;
}

變量計(jì)算

在Sass中除了可以使用數(shù)值進(jìn)行運(yùn)算之外，還可以使用變量進(jìn)行計(jì)算。示例：

$content-width: 720px;
$sidebar-width: 220px;
$gutter: 20px;

.container{
    width: $content-width + $sidebar - width + $gutter;
    margin: 0 auto;
}

編譯出來的CSS

     .container{
        width: 960px;
        margin: 0 auto;
    }

數(shù)字運(yùn)算

數(shù)字運(yùn)算包括前面介紹的：加法、減法、乘法和除法等運(yùn)算。而且還可以通過括號(hào)來修改他們的運(yùn)算先后順序。和我們數(shù)學(xué)運(yùn)算是一樣的。示例：
.box{
width: ((220px + 720px) - 11 * 20) /12;
}
編譯出來的CSS：
.box{
width: 60px;
}

顏色運(yùn)算

所有算數(shù)運(yùn)算都支持顏色值，并且是分段運(yùn)算的。也就是說，紅、綠和藍(lán)各顏色分段單獨(dú)進(jìn)行運(yùn)算。如：

p {
  color: #010203 + #040506;
}

計(jì)算公式為 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成為：

如此編譯出來的 CSS 為：

p {
  color: #050709;
}

算數(shù)運(yùn)算也能將數(shù)字和顏色值一起運(yùn)算，同樣也是分段運(yùn)算的。示例：

p {
  color: #010203 * 2;
}

計(jì)算公式為01 * 2 = 02、02 * 2 = 04和03 * 2 = 06，并且被合成為：

p{
     color: #020406;
}

字符運(yùn)算

在Sass中可以通過加法符號(hào)“+”來對(duì)字符串進(jìn)行連接。例如：

$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}

編譯出來的CSS：

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

除了在變量中做字符連接運(yùn)算之外，還可以直接通過 +，把字符連接在一起：

div {
  cursor: e + -resize;
}

編譯出來的CSS:

div {
  cursor: e-resize;
}

注意，如果有引號(hào)的字符串被添加了一個(gè)沒有引號(hào)的字符串 （也就是，帶引號(hào)的字符串在 + 符號(hào)左側(cè)）， 結(jié)果會(huì)是一個(gè)有引號(hào)的字符串。 同樣的，如果一個(gè)沒有引號(hào)的字符串被添加了一個(gè)有引號(hào)的字符串 （沒有引號(hào)的字符串在 + 符號(hào)左側(cè)）， 結(jié)果將是一個(gè)沒有引號(hào)的字符串。 例如：

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

編譯出來的 CSS：

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }