Sass學習筆記（補充）

時間 2019-12-10

標籤 sass 學習筆記補充简体版

原文原文鏈接

閱讀目錄

1. Sass和SCSS的區別css

2. @while循環html

3. @at-rootgit

4. @contentgithub

5. 凸顯註釋編程

6. CSS輸出樣式瀏覽器

7. 重置瀏覽器樣式sass

8. Sass調試和@debug命令、@warn命令編程語言

9. 使用Sass時的注意事項
ide

相關連接：Sass學習筆記前篇函數

相關連接：Sass關於顏色函數的樂趣

在Sass學習筆記前篇，記載了Sass安裝、基本用法、編程語法，在這篇，將補充在前篇未記載的知識。

1. Sass和SCSS的區別

參考連接：http://sass.bootcss.com/docs/scss-for-sass-users/

SCSS是Sass3引入新的語法，其實它們沒有什麼本質的區別，Sass是以「.sass」後綴爲擴展名，SCSS是以「.scss」後綴爲擴展名。

Sass與SCSS的語法區別，Sass是以嚴格的縮進式語法規則來寫，不使用大括號和分號；SCSS和CSS同樣，要使用大括號和分號。

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

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

編譯後的CSS樣式：

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

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

2. @while循環

在Sass中，除了@for和@each循環外，還支持@while循環。跟其餘編程語言相似，語法是while(條件){語句}。Sass是以@來控制命令的，因此須要加符號@。

$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: …)和@at-root(with: …)

@at-root默認只會跳出選擇器，@at-root至關於@at-root(without: rule)，rule表示常規CSS。

可是@at-root默認是不會跳出@media和@support的，若是想跳出這兩個，則將rule改成media或者support，也就是@at-root(without: media)或者@at-root(without: support)。

還有一個@at-root(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;
}

with或without做用相反，也就是不跳出，若是將Sass代碼中的without改成with，編譯後的CSS樣式爲：

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

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

C. 應用於@keyframe

.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新增的，可使混合宏@mixin接受一整塊樣式，接受的樣式從@content開始。

@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均可以使用，引用到樣式表開頭便可。