Sass 快速入門學習

什麼是css預處理器

　　衆所周知css並不能算是一們真正意義上的「編程」語言，它自己沒法未完成像其它編程語言同樣的嵌套、繼承、設置變量等工做。

　　在程序員眼裏，CSS是一件很麻煩的東西。它沒有變量，也沒有條件語句，只是一行行單純的描述，寫起來至關費事。

　　爲了解決css的不足，開發者們想到了編寫一種對css進行預處理的「中間語言」，能夠實現一些「編程」語言纔有的功能，而後自動編譯成css供瀏覽識別，這樣既必定程度上彌補了css的不足，也無需一種新的語言來代替css以供瀏覽器識別。因而css預處理語言SASS就應運而生了。

什麼Sass

Sass 是一門高於 CSS 的元語言，它能用來清晰地、結構化地描述文件樣式，有着比普通 CSS 更增強大的功能。

Sass 可以提供更簡潔、更優雅的語法，同時提供多種功能來建立可維護和管理的樣式表。

Sass 是最先的css預處理語言，有比less更爲強大的功能。但因其一開始的縮進式語法並不能被開發者們接受，因此使用率不高，不過因爲其強大的功能和Ruby on Rails 的大力推進，逐漸被更多開發者使用。

Sass 是採用的Ruby語言編寫的一款css預處理語言，它誕生於2007年，是最先成熟css預處理語言。最初它是爲了配合haml而設計的，所以有着和haml同樣的縮進式風格。

Sass從第三代開始，放棄了縮進式風格，而且徹底向下兼容普通的css代碼，這一代的Sass也被稱爲Scss。

Sass 和 SCSS 有什麼區別？

Sass 和 SCSS 實際上是同一種東西，咱們平時都稱之爲 Sass，二者之間不一樣之處有如下兩點：

文件擴展名不一樣，Sass 是以「.sass」後綴爲擴展名，而 SCSS 是以「.scss」後綴爲擴展名 語法書寫方式不一樣，Sass 是以嚴格的縮進式語法規則來書寫，不帶大括號({})和分號(;)，而 SCSS 的語法書寫和咱們的 CSS 語法書寫方式很是相似。 先來看一個示例：Sass 語法

$font-stack: Helvetica, sans-serif  //定義變量
$primary-color: #fff //定義變量
 
body
  font: 100% $font-stack
  color: $primary-color

SCSS 語法

$font-stack: Helvetica, sans-serif;
$primary-color: #fff;
 
body {
  font: 100% $font-stack;
  color: $primary-color;
}

編譯出來的 CSS

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

文件後綴名

sass有兩種後綴名文件：

一種後綴名爲sass，不使用大括號和分號； 另外一種就是咱們這裏使用的scss文件，這種和咱們平時寫的css文件格式差很少，使用大括號和分號。 而本教程中所說的全部sass文件都指後綴名爲scss的文件。在此也建議使用後綴名爲scss的文件，以免sass後綴名的嚴格格式要求報錯。

//文件後綴名爲sass的語法
body
  background: #eee
  font-size:12px
p
  background: #0982c1
 
//文件後綴名爲scss的語法  
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
}

注意：「.sass」只能使用 Sass 老語法規則（縮進規則），「.scss」使用的是 Sass 的新語法規則，也就是 SCSS 語法規則（相似 CSS 語法格式）。 ps：本文采用的語法格式都將使用的是 SCSS 語法格式。

四種style生成後的css

在 Sass 中編譯出來的樣式風格也能夠按不一樣的樣式風格顯示。其主要包括如下幾種樣式風格：

• 嵌套輸出方式 nested
• 展開輸出方式 expanded
• 緊湊輸出方式 compact
• 壓縮輸出方式 compressed

在知識點中，嵌套輸出方式，在前端是能夠看到效果的，後幾種方式是須要在命令行中編譯的，在編譯的時候分別帶上參數「 --style expanded --style compact --style compressed」:

Sass 提供了一種嵌套顯示 CSS 文件的方式

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
 
  li { display: inline-block; }
 
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nested 編譯出來：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

expanded 這個輸出的 CSS 樣式風格和 nested 相似，只是大括號在另起一行，一樣上面的代碼，編譯出來：

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

compact 編譯出來：

nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

compressed 編譯出來：

nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}

聲明變量

JavaScript中聲明變量都是使用關鍵詞「var」開頭，可是在 Sass 不使用這個關鍵詞，而是使用美圓符號「$」開頭。

Sass 的變量包括三個部分：

• 聲明變量的符號「$」

• 變量名稱

• 賦予變量的值

  //sass style $highlight-color: #F90;

變量的引用

　　凡是css屬性的標準值（好比說1px或者bold）可存在的地方，變量就可使用。css生成時，變量會被它們的值所替代。以後，若是你須要一個不一樣的值，只須要改變這個變量的值，則全部引用此變量的地方生成的值都會隨之改變。

$color: #F90;
.box2 {
  border: 1px solid $color;
}
 
//編譯後
 
.box2 {
  border: 1px solid #F90;
}

　　看上邊示例中的$color變量，它被直接賦值給border屬性，當這段代碼被編譯輸出css時，$color會被#F90這一顏色值所替代。產生的效果就是給box2這個類一條1像素寬、實心且顏色值爲#F90的邊框。

　　在聲明變量時，變量值也能夠引用其餘變量。當你經過粒度區分，爲不一樣的值取不一樣名字時，這至關有用。下例在獨立的顏色值粒度上定義了一個變量，且在另外一個更復雜的邊框值粒度上也定義了一個變量：

$color: #F90;
$border: 1px solid $color;
.box2 {
  border: $border;
}
 
//編譯後
 
.box2 {
  border: 1px solid #F90;
}

　　這裏，$border變量的聲明中使用了$color這個變量。產生的效 果就跟你直接爲border屬性設置了一個1px $color solid的值是同樣的。

更多內容和示例參考： http://www.hubwiz.com/course/565c0c2abc27d77730c072b3/