一、屬性嵌套

CSS屬性名以中劃線分割，前半部分相同的，可以進(jìn)行公用屬性提取。

1、公用屬性提取

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
    ## 編譯為:
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

2、命名空間也可以包含自己的屬性值：

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}
## 編譯為:
.funky {
  font: 20px/24px;
  font-family: fantasy;
  font-weight: bold; 
}

二、父選擇器 '&'

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}
編譯為

a {
  font-weight: bold;
  text-decoration: none; 
}
a:hover {
   text-decoration: underline;
}
body.firefox a {
   font-weight: normal; 
}

三、變量定義 '$'

1、定義全局變量：

$width: 5em;
#main {
  width: $width;
}
編譯為：
#main {
  width: 5em;
}

2、作用域提升!global

#main {
  $width: 5em !global;    //將 $width作用域提升為全局變量
  width: $width;
}
#sidebar {
  width: $width;
}
編譯為：
#main {
  width: 5em;
}
#sidebar {
  width: 5em;
}

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

SassScript 支持 6 種主要的數(shù)據(jù)類型：

• 數(shù)字：1, 2, 13, 10px
• 字符串：有引號字符串與無引號字符串，"foo", 'bar', baz
• 顏色：blue, #04a3f9, rgba(255,0,0,0.5)
• 布爾型：true, false
• 空值：null
• 數(shù)組 (list)：用 空格或逗號 作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
• maps: 相當(dāng)于 JavaScript 的 object，(key1: value1, key2: value2)

五、運(yùn)算

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

• 數(shù)字類型：支持 (+， -， *， /， %，<， >， <=， >= )，如果必要會在不同單位間轉(zhuǎn)換值
• 所有類型：==, !=

2、顏色值運(yùn)算

運(yùn)算規(guī)則：紅、綠、藍(lán)分別相加。

p {
  color: #010203 + #040506;
}
p{
  color: #050709
}

3、字符串運(yùn)算

1）、運(yùn)算值是否有引號，取決于+號前面的字符是否有引號。

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

2、運(yùn)算表達(dá)式與其他值連用時，用空格做連接符：

p {
  margin: 3px + 4px auto;
}
編譯wei：
p {
  margin: 7px auto;
}