/* SCSS語法 */
.main {
  background-color: #eee;
  .container {
    background-color: #fff;
    color: #222;
  }
}

/* Sass語法 */
.main 
  background-color: #eee
  .container
    background-color: #fff
    color: #222
 

/* SCSS語法 */
.main {
  background-color: #eee;
}
.main .container {
  background-color: #fff;
  color: #222;
}

/* Sass語法 */
.main {
  background-color: #eee;
}
.main .container {
  background-color: #fff;
  color: #222;
}

$i: 1;
@while $i < 3 {
  .div-#{$i} {
    width: 100px * $i;
  }
  $i: $i + 1;
}

編譯後的CSS樣式：

.div-1 {
  width: 100px;
}
.div-2 {
  width: 200px;
}

3. @at-root

Sass3.3.0新增的功能，可以跳出選擇器嵌套的。一般所有的嵌套，都是繼承上級選擇器的，@at-root就可以跳出所有的上級選擇器。

A. @at-root普通

body {
  font-size: 12px;
  @at-root .div {
    background-color: #eee;
  }
}

編譯後的CSS樣式：

body {
  font-size: 12px;
}
.div {
  background-color: #eee;
}

B. @at-root(without: …)[email protected](with: …)

@at-root默認只會跳出選擇器，@[email protected](without: rule)，rule表示常規CSS。

[email protected]@[email protected]，如果想跳出這兩個，則將rule改為media或者support，[email protected](without: media)[email protected](without: support)。

[email protected](without: all)，也就是字面意思，跳出所有的嵌套，包括media、support和常規CSS。

/* media */
@media print {
  .page1 {
    width: 40%;
    @at-root (without: media) {
      .active {
        color: red;
      }
    }
  }
}
/* all */
@media print {
  .page2 {
    width: 40%;
    @at-root (without: all) {
      .active {
        color: red;
      }
    }
  }
}

編譯後的CSS樣式：

/* media */
@media print {
  .page1 {
    width: 40%;
  }
}
.page1 .active {
  color: red;
}

/* all */
@media print {
  .page2 {
    width: 40%;
  }
}
.active {
  color: red;
}

/* media */
@media print {
  .page1 {
    width: 40%;
  }
  .active {
    color: red;
  }
}

/* all */
@media print {
  .page2 {
    width: 40%;
  }
  .page2 .active {
    color: red;
  }
}

C. [email protected]

.myAnimation {
    animation: myAnimation 3s;
    @at-root {
        @keyframes myAnimation {
          from{width:0;}
          to{width:120px;}
        }
    }
}

編譯後的CSS樣式：

.myAnimation {
  animation: myAnimation 3s;
}
@keyframes myAnimation {
  from {
    width: 0;
  }
  to {
    width: 120px;
  }
}

4. @content

@content是Sass3.2.0新增的，[email protected]，[email protected]

@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body {
    color: red 
  }
}

編譯後的CSS樣式：

@media only screen and (max-width: 480px) {
  body {
    color: red;
  }
}

5. 凸顯註釋

我們從CSS輸出樣式中，可以看出，只有壓縮輸出樣式compressed，不會對註釋輸出，其他所有的輸出樣式的CSS代碼都帶有註釋。

但是有時候，我們想要壓縮的CSS文件也有註釋，這時候，我們就可以用凸顯註釋。凸顯註釋就是在Sass標準註釋中加一個感嘆號!。例：/*! 凸顯註釋 */。

/*! 凸顯註釋 */
.main {
  background-color: #eee;
  .container {
    background-color: #fff;
    color: #222;
  }
}

編譯後的CSS樣式：

?/*! 凸顯註釋 */.main{background-color:#eee}.main .container{background-color:#fff;color:#222}

6. CSS輸出樣式

Sass編譯CSS樣式風格有四種：nested、expanded、compact、compressed。

A. :nested 嵌套輸出方式，默認值

nested是Sass默認的輸出方式，它反映了CSS的結構樣式和HTML文檔結構，縮進的層級反映了嵌套的層級。每個屬性都占有一行，每條選擇器是根據嵌套的層級縮進的。例如：

.main {
  background-color: #eee;
  .container {
    background-color: #fff;
    color: #222;
  }
}

編譯後的CSS樣式：

.main {
  background-color: #eee; }
  .main .container {
    background-color: #fff;
    color: #222; }

B. :expanded 正常輸出方式，沒有縮進的、擴展的

expanded和nested相似，區別就在於縮進，expanded的選擇器和閉大括號不會縮進，屬性值縮進所屬的選擇器內。

還是以上面樣式為例，編譯後的CSS樣式：

.main {
  background-color: #eee;
}
.main .container {
  background-color: #fff;
  color: #222;
}

C. :compact 緊密輸出方式，單行輸出

compact是單行CSS輸出方式，一條選擇器和它的屬性值占一行。

同樣以上面樣式為例，編譯後的CSS樣式：

.main { background-color: #eee; }
.main .container { background-color: #fff; color: #222; }

D. :compressed 壓縮輸出方式，去掉註釋及空格

compressed會去掉標準的Sass和CSS註釋及空格，選擇器和屬性值緊挨著輸出。

以上面樣式為例，編譯後的CSS樣式：

.main{background-color:#eee}.main .container{background-color:#fff;color:#222}

7. 重置瀏覽器樣式

我們在寫CSS時，首先都會引入一段重置瀏覽器樣式的代碼，這是因為不同的瀏覽器對標簽的默認樣式值不同，，所以我們需要有一套樣式表來重置瀏覽器樣式，避免我們寫的網頁在各個瀏覽器中造成的顯示差異。

• http://cssreset.com/，該網站有最流行的CSS重置樣式表，可以根據自己的需求復制。

還有一種標準化方法，跟重置方法有點不一樣，它會使瀏覽器中不一致的地方標準化，而不是重新修改這些地方。

• http://necolas.github.io/normalize.css/，該網站提供了normalize.css的樣式文件。（好像國內有被墻了，只能FQ了。）
• https://github.com/kristerkari/normalize.scss，可以在該頁面，下載normalize.scss文件。在寫Sass時，無論是normalize.css還是normalize.scss都可以使用，引用到樣式表開頭即可。

8. [email protected]@warn命令

A. @[email protected]

@debug偽指令檢測錯誤，[email protected]ug命令不會經常用到，但是它在調試自定義混合宏和函數時會起到很大的作用。

@warn命令用戶對問題提供警告建議；它將SassScript表達式顯示到標準錯誤輸出流。

B. Chrome瀏覽器調試

未完待續。

C. Firefox瀏覽器調試

未完待續。

9. 使用Sass時的註意事項

• 在寫Sass代碼時就應該註意代碼規範
• 不要嵌套太多層代碼，最好不要超過三層
• 非必須情況下，不要寫重復的混合宏
• 最好按模塊書寫樣式表，[email protected]

參考鏈接：http://sass-lang.com/

http://sass.bootcss.com/

http://www.w3cplus.com/sassguide/syntax.html

SASS在線轉換器

Sass學習筆記（補充）