sass 筆記

安裝

文檔

官網：https://www.sass.hk/guide/

使用

• 定義變量，使用$定義變量，如果在花括號內定義的變量只能在其內部或子級使用

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

• 變量中中劃線與下劃線是相同的

$link-color: blue;
a {
  color: $link_color;
}

//編譯後

a {
  color: blue;
}

• 嵌套CSS 規則

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

• 父選擇器的標識符&;

article a {
  color: blue;
  &:hover { color: red }
}

• 羣組選擇器的嵌套;

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

• 子組合選擇器和同層組合選擇器：>、+和~;

這些組合選擇器可以毫不費力地應用到sass的規則嵌套中。可以把它們放在外層選擇器後邊，或裏層選擇器前邊：

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
sass會如你所願地將這些嵌套規則一一解開組合在一起：

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

• 嵌套屬性;

對於屬性的縮寫形式，你甚至可以像下邊這樣來嵌套，指明例外規則：

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
這比下邊這種同等樣式的寫法要好：

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

導入SASS文件;

css有一個特別不常用的特性，即@import規則，它允許在一個css文件中導入其他css文件。然而，後果是隻有執行到@import時，瀏覽器纔會去下載其他css文件，這導致頁面加載起來特別慢。

sass也有一個@import規則，但不同的是，sass的@import規則在生成css文件時就把相關文件導入進來。這意味着所有相關的樣式被歸納到了同一個css文件中，而無需發起額外的下載請求