1.webstorm 自動編譯SASS 下載安裝包 http://rubyinstaller.org/downloads/ 然後點擊安裝，路徑為預設路徑就行， 勾選以下兩項 add Ruby executables to your PATH Associate .rb and rbw files w ...
1.webstorm 自動編譯SASS
下載安裝包 http://rubyinstaller.org/downloads/
然後點擊安裝，路徑為預設路徑就行， 勾選以下兩項
add Ruby executables to your PATH
Associate .rb and rbw files with this Ruby information
安裝完，打開命令行 輸入 gem install sass
webstorm 配置 點擊setting選擇tool下的file watcher 如下圖：
2.SCSS 和 Sass 的區別。
SCSS 是 Sass 引入新的語法，其語法完全相容css3，並且繼承了Sass的強大的功能，SCSS 是CSS的超級（擴展），
因此，所有在CSS 中正常工作的代碼也能在SCSS 中正常的工作。
3. 使用變數：
變數聲明 $highlight-color: #f90; 如果一個變有多個值可以用逗號分隔。如：
$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"；
當變數定義在css 規則內，那麼該變數只能在此規則內使用
變數引用： 例如：
$highlight-color: #F90;
.selected {
border: 1px solid $highlight-color;
}
//編譯後
.selected {
border: 1px solid #F90;
}
變數名用中劃線還是下劃線
中劃線命名的內容和下劃線命名的內容是互通的
$link-color: blue;
a {
color: $link_color;
}
//編譯後
a {
color: blue;
}
4.嵌套css 規則
#content {
article {
h1 { color: #333 }
p { margin-bottom: 1.4em }
}
aside { background-color: #EEE }
}
/* 編譯後 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
父選擇器的標識符&;
&符號，可以放在任何一個選擇器可以出現的地方。
article a {
color: blue;
&:hover { color: red }
}
/* 編譯後 */
article a{color:blue}
article a:hover {color: red}
群組選擇器的嵌套
.container {
h1, h2, h3 {margin-bottom: .8em}
}
/* 編譯後 */
.container h1, .container h2, .container h3 { margin-bottom: .8em }
內嵌在群組中的選擇器：
nav, aside {
a {color: blue}
}
/* 編譯後 */
nav a, aside a {color: blue}
子組合選擇器和同組合選擇器 ： > , + 和 ~ ；
article section { margin: 5px }
選擇article 下的所有的命名中的 section 選擇器的元素。
article > section { border: 1px solid #ccc }
選擇器只會選擇article 下緊跟著的子元素中命名section選擇器的元素。
header + p { font-size: 1.1em }
選擇同層相鄰的選擇器，選擇header 後面緊跟著的p 元素。
article ~ article { border-top: 1px dashed #ccc }
同層全體組合選擇器，選擇所有article 後的同層article元素。
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}
/* 編譯後 */
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
5.導入SASS 文件
使用sass的@import規則並不需要指明被導入文件的全名。
你可以省略.sass或.scss文件尾碼
舉例來說，@import"sidebar";這條命令將把sidebar.scss
文件中所有樣式添加到當前樣式表中
當你@import一個局部文件時，還可以不寫文件的全名，
即省略文件名開頭的下劃線 舉例來說，你想導入
themes/_night-sky.scss這個局部文件里的變數，
你只需在樣式表中寫@import "themes/night-sky";。
預設變數值：
在一般的情況下，反覆生命一個值，最後一次生命會覆蓋前面
的聲明。
強制覆蓋 !default ,用於變數。
例如：
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
嵌入導入：
sass 允許@import 命令寫在css 規則內，這種導入方式下，生產的css文件是，局部
文件會被插入到css 規則內導入它的地方，舉個例子，一個名為_blue-theme.scss
的局部文件，內容如下。
aside {
background: blue;
color: white;
}
.blue-theme {@import "blue-theme"}
//生成的結果跟你直接在.blue-theme選擇器內寫_blue-theme.scss文件
的內容完全一樣。
. blue-theme {
aside {
background: blue;
color: #fff;
}
}
原生的CSS導入
由於sass 相容原生的css 所以它支持原生的css@import
● 被導入文件的名字以.css結尾；
● 被導入文件的名字是一個URL地址（比如http://www.sass.hk/css/css.css），由此可用谷歌字體API提供的相應服務；
● 被導入文件的名字是CSS的url()值。
6.靜默註釋
sass 另外提供了一種不同於css 的註釋。它以 // 開頭，註釋內容直到末行。
body {
color: #333; // 這種註釋內容不會出現在生成的css文件中
padding: 0; /* 這種註釋內容會出現在生成的css文件中 */
}
7.混合器：
混合器使用@mixin 標識符定義。
例如：
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
然後就可以在你的樣式表中通過@include來使用這個混合器，
放在你希望的任何地方。@include調用會把混合器中的所有
樣式提取出來放在@include被調用的地方。如果像下邊這樣寫：
notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
}
//sass最終生成：
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
給混合器傳參：
通過在@include 混合器時給混合器傳參，來指定混合器生成的精確樣式，當
@include 混合器時，參數其實就是可以給css 屬性值的變數。
@mixin link-colors($normal,$hover,$visited) {
color: $normal;
$:hover {color:$hover;}
$:visited {color:$visited;}
}
當混合器被@include 時，你可以把它當做一個css 函數來傳參。
a{
@include link-colors(blue, red,green)
}
// Sass 最終生成的是
a{color:blue;}
a:hover {color:red;}
a:visited { color: green;}
sass 允許通過語法 $name:value 的形式指定每個參數的值，這種形式，
的傳參，參數順序就不必在乎了，只要保證沒有漏掉參數即可。
a {
@include link-colors(
$normal: blue,
$visited: green,
$hover:red
);
}
預設參數值：
為了在@include 混合器時傳入所有的參數，我們可以給參數制定一個預設值。
參數預設值使用： $name: default-value 的生命形式。
@mixin link-colors(
$normal,
$hover: $normal,
$visited: $normal
)
{
color: $normal;
$:hover { color: $hover;}
$:visited { color: $visited;}
}
如果這樣調用： @include link-colors(red) $hover 和$visited
也會自動賦值為red.
8.選擇器繼承
通過@extend 語法實現
// 通過選擇器繼承樣式
.error {
border: 1px red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
