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;
　　　　　　}

總結

以上是生活随笔為你收集整理的sass 基础——回顾的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。