用了這么久的scss，是時候總結一下了。
現(xiàn)在看感覺這篇文檔很沒用 好久之前寫的了 剛發(fā)布
1. what?
css不是一種編程語言，
css預處理器：基本思想是用一種專門的編程語言，進行網(wǎng)頁樣式設計，然后在編譯成正常的css文件，
Sass 有兩種語法格式。首先是 SCSS (Sassy CSS) —— 這種格式僅在 CSS3 語法的基礎上進行拓展，所有 CSS3 語法在 SCSS 中都是通用的，同時加入 Sass 的特色功能。此外，SCSS 也支持大多數(shù) CSS hacks 寫法以及瀏覽器前綴寫法 (vendor-specific syntax)，以及早期的 IE 濾鏡寫法。這種格式以 .scss 作為拓展名。
2. css功能擴展
2.1嵌套規(guī)則
允許將一套 CSS 樣式嵌套進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器,
嵌套功能避免了重復輸入父選擇器，而且令復雜的 CSS 結構更易于管理
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
2.2父選擇器&
嵌套 CSS 規(guī)則時，有時也需要直接使用嵌套外層的父選擇器，
例如，當給某個元素設定 hover 樣式時，
或者當 body 元素有某個 classname 時，可以用 & 代表嵌套規(guī)則外層的父選擇器
a {
font-weight: bold;
text-decoration: none;
// 使用一：偽元素，偽類時
&:hover { text-decoration: underline; }
// 使用二：其他選擇其中的a使用當前a的樣式時
body.firefox & { font-weight: normal; }
// 使用三：當前選擇器的其他類名時
&.color {red;}
}
& 必須作為選擇器的第一個字符，其后可以跟隨后綴生成復合的選擇器，例如
#main {
color: black;
// 使用四：拼接成的選擇器
&-sidebar { border: 1px solid; }
}
2.3 屬性嵌套
Sass 允許將屬性嵌套在命名空間中
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
3. 注釋
3.1
Sass 支持標準的 CSS 多行注釋 /* /，以及單行注釋 //，
多行注釋 / */會 被完整輸出到編譯后的 CSS 文件中，
而單行注釋 //則不會
3.2
將 ! 作為多行注釋的第一個字符表示在壓縮輸出模式下保留這條注釋并輸出到 CSS 文件中，通常用于添加版權信息。
3.3
插值語句 (interpolation) 也可寫進多行注釋中輸出變量值：
$version: "1.2.3";
/* This CSS is generated by My Snazzy Framework version #{$version}. */
4. SassScript
4.1 變量
$開頭,直接使用
$width: 5em;
變量支持塊級作用域
將局部變量轉換為全局變量可以添加 !global 聲明
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
4.2 #{} 插值語句
可以在選擇器 、屬性名、屬性值 中使用變量
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
4.3 @import
4.3.1
允許其導入 SCSS 或 Sass 文件。被導入的文件將合并編譯到同一個 CSS 文件中，另外，被導入的文件中所包含的變量或者混合指令 (mixin) 都可以在導入的文件中使用。
4.3.2
允許同時導入多個文件
@import "rounded-corners", "text-shadow";
4.3.3
導入文件也可以使用 #{ } 插值語句，但不是通過變量動態(tài)導入 Sass 文件，只能作用于 CSS 的 url() 導入方式：
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");
4.3.4分音，文件名前加_
需要導入 SCSS 或者 Sass 文件，但又不希望將其編譯為 CSS
將文件命名為 _colors.scss，便不會編譯 colours.css 文件
使用時不加
@import "colors";
上面的例子，導入的其實是 _colors.scss 文件
注意，不可以同時存在添加下劃線與未添加下劃線的同名文件，添加下劃線的文件將會被忽略。
4.3.5嵌套@import
可以將 @import 嵌套進 CSS 樣式或者 @media 中，與平時的用法效果相同，只是這樣導入的樣式只能出現(xiàn)在嵌套的層中
#main {
@import "example";
}
不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import
4.4 @media
4.4.1允許其在 CSS 規(guī)則中嵌套
@media 將被編譯到文件的最外層，
包含嵌套的父選擇器
4.4.2可以使用 SassScript（比如變量，函數(shù)，以及運算符）代替條件的名稱或者值
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}
編譯為
.sidebar {
width: 300px; }
@media screen and (orientation: landscape) {
.sidebar {
width: 500px; } }
4.5@extend
繼承樣式
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
