SASS 學習筆記

基礎知識

這部份內容摘自 Sass Basics。

預處理 Preprocessing

預處理功能，就是將 SASS/SCSS 格式的文件輸出爲 CSS 文件，能夠對單個文件進行預處理，也能夠對指定目錄進行預處理，還能夠對指定目錄進行實時監控，基本語法以下：

sass input.scss output.css
sass --watch app/sass:public/stylesheets

變量 Variables

有了變量功能，就能夠很方便地實現一處定義、多處使用，終於不用一遍遍地複製粘貼了。SASS 中的變量以 $ 開頭。

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

輸出後的 CSS 文件以下所示：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

嵌套 Nesting

有了嵌套功能，能夠更高效地書寫 CSS，不過嵌套的層數過多會使得代碼質量嚴重降低，因此要嚴格控制嵌套的層數，以不超過三層爲宜。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

處理後生成的 CSS 內容以下：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

引入 Partials

引入文件與 C/C++ 中的頭文件很類似，都是把經常使用的代碼段保存至文件中，而後在其它文件中引用。SASS 中的引入文件如下劃線開頭：_partial.sass，在其它文件中引用時，用命令 @import partial 便可，引用時不須要帶文件名開頭的下劃線和擴展名。

導入 Import

CSS 自己就提供了導入的選項，這樣就將 CSS 進一步分割成了代碼更少、更容易維護的代碼段，可是在 CSS 中每一條 @import 語句都會產生一次 HTTP 請求。SASS 則在此基礎上進一步作了改進，每個須要從別處導入內容的 CSS 文件，SASS 都會將須要導入的內容合併到當前的 CSS 文件中，這樣就不會有 CSS 那樣產生額外的 HTTP 請求的狀況了。

好比如今有一個引入文件 _reset.scss，在另外一個文件 base.scss 中要引用它，兩個文件內容以下所示：

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

通過 SASS 處理後，最終的 CSS 文件以下：

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

混合 Mixins

有時候同一個屬性爲了考慮到瀏覽器兼容性，就須要寫好幾行相似的語句，若是這組屬性值還會常常變，改動起來的工做量可就要了老命了。不過 SASS 提供了混合功能，就可以讓咱們「一次修改，總體更新」。這個混合功能，其實和常見的編程語言中的函數功能很類似，看代碼：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

經過上面的代碼，就很容易能看明白混合是如何定義並被調用的，這裏還用到了前面介紹的變量概念。最後生成的 CSS 以下所示：

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

這個示例代碼還涉及到了瀏覽器前綴這個概念，Vendor Prefix:爲何須要瀏覽器引擎前綴這篇文章也講了瀏覽器前綴的做用、適用狀況及其用法，可是以後即將學習的 Gulp 能夠集成 Autoprefixer，這樣就能夠把補充瀏覽器前綴的工做交給自動化工具，因此在這裏再也不深刻討論這個概念了。

繼承 Extend/Inheritance

繼承但是 SASS 中最經常使用的功能之一，經過 @extend 命令，能夠將應用於一個選擇器的屬性分享給另外一個選擇器，這樣就能夠進一步簡化 SASS 的代碼了。好比下面的示例代碼先是建立了一個基礎的 message 選擇器，而後在此基礎上又建立了 success、error、warning 這三個「派生」的選擇器，它們仨共享 message 的屬性，同時各自又有不一樣的邊框屬性。

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

而且最終生成的 CSS 代碼也很簡潔，怎麼樣，很不錯吧？

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

運算符 Operators

在 SASS 中，還能夠進行簡單的加減乘除以及取餘這五種運算。

.container { width: 100%; }


article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

上面的代碼建立了一套基礎寬度爲 960px 的流式網格（fluid grid），而且根據不一樣部分的寬度計算其對應的百分比，所生成的 CSS 以下：

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

好了，基礎知識就講到這裏了，如今就拿起本身的代碼來練習吧！