scss

Sass 是一款強化 CSS 的輔助工具，它在 CSS 語法的基礎上增長了變量 (variables)、嵌套 (nested rules)、
混合 (mixins)、導入 (inline imports) 等高級功能，這些拓展令 CSS 更增強大與優雅。複製代碼

特點功能：

• 徹底兼容css3
• 在css的基礎上增長變量、嵌套、混合等功能
• 經過函數進行顏色值與屬性值的運算
• 提供控制指令（control directives）等高級功能
• 自定義輸出格式

sass有兩種語法格式，首先是 SCSS（Sassy CSS），這種格式僅在css3的語法上進行拓展，同時加入了Sass的特點功能。以 .scss 做爲擴展名。    

另外一種是Sass語法格式，（又稱：縮進格式），是一種簡化格式，用「縮進」代替「花括號」表示屬性屬於某個選擇器，用 「換行」 代替 「分號」 分隔屬性。以 .sass 做爲擴展名

Sass 容許將一套 CSS 樣式嵌套進另外一套樣式中，內層的樣式將它外層的選擇器做爲父選擇器。嵌套功能避免了重複輸入父選擇器，並且令複雜的 CSS 結構更易於管理：

.solidPart {               > svg {                position: relative;                top: 2px;                .name {                  color: #ff7219; } } }複製代碼

父選擇器&

&符號表明父選擇器

a {  font-weight: bold;  text-decoration: none;  &:hover {    text-decoration: underline;  }  body.firefox & {    font-weight: normal;  }}   
// 以上&表明a選擇器複製代碼

& 必須做爲選擇器的第一個字符，其後能夠跟隨後綴生成複合的選擇器，例如

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}複製代碼

.suj {  >p {    font: {      family: fantasy;      size: 1em;      weight: bold;    }    color: red;  }}複製代碼

變量 $ (Variables: $)

變量以$開頭，賦值方法與css屬性方法的寫法同樣（變量支持做用域）

$r: red;
.suj {  >p {    font: {      family: fantasy;      size: 1em;      weight: bold;    }    color: $r;  }}複製代碼

SassScript 支持 6 種主要的數據類型：

• 數字，1, 2, 13, 10px
• 字符串，有引號字符串與無引號字符串，"foo", 'bar', baz
• 顏色，blue, #04a3f9, rgba(255,0,0,0.5)
• 布爾型，true, false
• 空值，null
• 數組 (list)，用空格或逗號做分隔符，如：margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif
• maps, 至關於 JavaScript 的 object，(key1: value1, key2: value2)

SassScript 也支持其餘 CSS 屬性值，好比 Unicode 字符集，或 !important 聲明。然而Sass 不會特殊對待這些屬性值，一概視爲無引號字符串。

 數字運算 (Number Operations)

SassScript 支持數字的加減乘除、取整等運算 (+, -, *, /, %)，若是必要會在不一樣單位間轉換值。

字符串運算 (String Operations)

+ 可用於鏈接字符串

在有引號的文本字符串中使用 #{} 插值語句能夠添加動態的值：

p:before {
  content: "I ate #{5 + 10} pies!";
}複製代碼

 @import

Sass 拓展了 @import 的功能，容許其導入 SCSS 或 Sass 文件。

@import "foo.scss";
複製代碼

或

@import "foo";
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);複製代碼

嵌套 @import

.example {
  color: red;
}
複製代碼

而後導入到 #main 樣式內

#main {
  @import "example";
}複製代碼

將會被編譯爲

#main .example {
  color: red;
}複製代碼