Sass學習指南

Sass是一個CSS預處理器。在Sass中，你可以使用變量，條件語句，循環，函數，繼承等其他編程語言所有的特性。只要一條命令，就能把Sass文件編譯成瀏覽器能識別的CSS文件。

1. 安裝和編譯

1.1 安裝

安裝Sass需要先安裝Ruby，這裏假定你已經安裝了Ruby。

在命令行輸入以下命令（Windows系統需要先安裝Linux shell）

sudo gem install sass

1.2 編譯

假定你已經在當前目錄創建了一個Sass文件，名叫test.scss：

$color:red;
body{
  color:$color;
}

你只要進入該目錄，執行以下命令：

sass test.scss:test.css

便可在當前目錄生成一個test.css：

body {
  color: red;}

在編譯 Sass 時，你可以開啓“watch”功能，這樣只要你的代碼進行任保修改，Sass都能自動監測到代碼的變化，並且給你直接編譯出來：

sass --watch test.scss:test.css

你可以指定生成的CSS文件風格：

sass test.scss:test.css --style expanded

這樣生成的CSS文件會是展開的：

body {
  color: red;
}

一共有四種樣式風格：

• 嵌套輸出方式 nested （默認）
• 展開輸出方式 expanded
• 緊湊輸出方式 compact
• 壓縮輸出方式 compressed （會刪除註釋）

最後，推薦一款GUI編譯工具：Koala。這是一個國人寫的開源軟件。

2. 基本特性

2.1 變量

Sass中的變量使用$開頭：

$font-size:12px;
$color:green !default;
div{
  color:$color;
  font-size:$font-size;
}

!default代表默認值。

你在選擇器或者mixin、函數中還可以定義局部變量。

$color:red;
div{
  $color:blue;
  color:$color;
}

2.2 嵌套

在Sass中，選擇器可以嵌套：

$color:red;
div{
  color:$color;

  a{
    text-decoration:none;
  }
}

編譯的CSS是：

div {
  color: red;
}
div a {
  text-decoration: none;
}

在CSS中，有很多同類性質的屬性，比如font-size、font-weight,font-family等,使用Sass可以讓屬性嵌套：

$color:red;
div{
  color:$color;

  font:{
    size:12px;
    weight:bold;
  }
}

對應的CSS：

div {
  color: red;
  font-size: 12px;
  font-weight: bold;
}

在嵌套的代碼中，可以使用&引用父類選擇器：

a{
    &:hover{
      color:green;
    }
}

對應的CSS：

a:hover {
  color: green;
}

2.3 運算

2.3.1 加法

.box {
  width: 20px + 10px;
}

編譯出來的 CSS:

.box {
  width: 30px;
}

不同單位進行加法或加法可能會報錯。

2.3.2 減法

.box {
  width: 20px - 10px;
}

編譯出來的 CSS:

.box {
  width: 10px;
}

由於 “-” 號在CSS中可以作爲屬性標識符的分隔符，所以在有變量參與的減法運算中，最好在 “-” 兩邊加上空格。

2.3.3 乘法

.box {
  width: 10px * 2;
}

編譯出來的 CSS:

.box {
  width: 20px;
}

Sass 的乘法運算和加法、減法運算一樣，在運算中有不同類型的單位時，也將會報錯。

2.3.4 除法

由於“/”符號在 CSS 中被使用，所以作爲CSS的超集，在 Sass 中做除法，直接使用“/”符號將不會生效，也不會報錯。

要解決這個問題，只需要添加一個小括號( )即可：

.box {
  width: (100px / 2);  
}

編譯出來的 CSS 如下：

.box {
  width: 50px;
}

”/”符號被當作除法有以下幾種情況：

• 如果數值或它的任意部分是存儲在一個變量中或是函數的返回值。
• 如果數值被圓括號包圍。
• 如果數值是另一個數學表達式的一部分。

如下所示：

//SCSS
p {
  font: 10px/8px;             // 純 CSS，不是除法運算
  $width: 1000px;
  width: $width/2;            // 使用了變量，是除法運算
  width: round(1.5)/2;        // 使用了函數，是除法運算
  height: (500px/2);          // 使用了圓括號，是除法運算
  margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運算
}

編譯出來的CSS

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
 }

除法運算時，如果兩個值帶有相同的單位值時，除法運算之後會得到一個不帶單位的數值。如下所示：

.box {
  width: (1000px / 100px);
}

編譯出來的CSS如下：

.box {
  width: 10;
}

2.3.5 顏色運算

Sass中的顏色運算會把顏色中的紅，綠，藍三種顏色的值分別進行運算：

div{
  color:#112233 + #445566;
}

其中，對於紅：11 + 22 = 33，綠：22 + 55 = 77，藍：33 + 66 = 99。

編譯得到的CSS：

div {
  color: #557799;
}

2.3.6 字符串運算

div{
  &:before{
    content:"Hello" + " " +"world";
  }
}

CSS爲：

div:before {
  content: "Hello world";
}

2.4 註釋

Sass中有兩種註釋風格：

• /*多行註釋*/ 這種註釋，在編譯以後仍然會保留，除非使用compressed風格
• // 單行註釋 這種註釋，在編譯之後不會存在
• /*!保留註釋*/ 即使使用compressed風格，仍然存在，通常用於文件首部版權信息。

2.5 插值

使用#{ }可以把一個變量的值動態的插入到其他地方：

$side:top;
.conatiner{
  margin-#{$side}:10px;
}

得到CSS：

.conatiner {
  margin-top: 10px;
}

2.6 @import

Sass 擴展了 CSS 的 @import 規則，讓它能夠引入SCSS文件。

@import "foo.scss";

如果你有一個 SCSS 或 Sass 文件需要引入， 但是你又不希望它被編譯爲一個 CSS 文件， 這時，你就可以在文件名前面加一個下劃線，就能避免被編譯。

例如，你有一個文件叫做 _colors.scss。 這樣就不會生成 _colors.css 文件了， 而且你還可以這樣做：

@import "colors";  //不用加下劃線

來引入 _colors.scss 文件。

注意，在同一個目錄不能同時存在帶下劃線和不帶下劃線的同名文件。 例如， _colors.scss 不能與 colors.scss 並存。

2.7 @media

Sass 中的 @media 指令和 CSS 的使用規則一樣的簡單，但它有另外一個功能，可以嵌套在 CSS 規則中。

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

CSS:

.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
    .sidebar {
        width: 500px; 
    } 
}

2.7 @at-root

當你選擇器嵌套多層之後，想讓某個選擇器跳出，此時就可以使用 @at-root。

.a {
  color: red;

  .b {
    color: orange;

    .c {
      color: yellow;

      @at-root .d {
        color: green;
      }
    }
  }  
}

編譯出來的CSS

.a {
  color: red;
}

.a .b {
  color: orange;
}

3. 代碼重用

3.1 混合宏

混合宏相當於C語言中的宏定義一樣，你定義了一段代碼，接着在另一個地方調用，Sass會在調用的地方原封不動的插入那段代碼。當然這樣也有不好的地方，那就是編譯之後的CSS代碼會出現冗餘。

Sass使用@mixin定義混合宏，使用@include來調用混合宏。

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.box1{
  @include border-radius;
}
.box2{
  @include border-radius;
}

CSS爲：

.box1 {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.box2 {
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

在混合宏中，可以傳一個不帶任何值的參數，比如：

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

在調用的時候可以給這個混合宏傳一個參數值：

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

還可以設置默認值：

@mixin border-radius($radius:5px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

調用的時候如果未傳值，將使用默認值。

有一個特別的參數“…”。當混合宏傳的參數過多之時，可以使用參數來替代：

@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }
}

3.2 繼承

3.2.1 繼承其他選擇器

在Sass中，可以通過@extend 繼承一個已有的樣式。

.box{
  font-size:12px;
}

.box1{
  @extend .box;
  color:red;
}

得到的CSS：

.box, .box1 {
  font-size: 12px;
}

.box1 {
  color: red;
}

3.2.2 繼承一個佔位符

上面的例子中，被繼承的.box選擇器最終也出現在了CSS文件中。這往往不是你需要的，更多的時候，你不希望被繼承的樣式也出現在CSS中。

你可以使用%定義一個佔位符：

%box{
  font-size:12px;
}

.box1{
  @extend %box;
  color:red;
}

.box2{
  @extend %box;
  color:blue;
}

CSS:

.box1, .box2 {
  font-size: 12px;
}

.box1 {
  color: red;
}

.box2 {
  color: blue;
}

3.1 函數

@function greeting($person){
  @return "Hello " + $person;
}

li{
  &:before{
    content:greeting("張三");
  }
}

CSS：

@charset "UTF-8";
li:before {
  content: "Hello 張三";
}

4. 控制命令

4.1 條件語句

@if可以用來判斷：

$line-height:3;
div{
  line-height:$line-height;
  @if $line-height > 5{
    font-size:12px;
  }@else{
    font-size:15px;
  }
}

CSS爲：

div {
  line-height: 3;
  font-size: 15px;
}

4.2 循環

4.2.1 @for循環

@for $i from 1 to 3{
  .item-#{$i}{
    width:100px * $i;
  }
}

CSS爲：

.item-1 {
  width: 100px;
}

.item-2 {
  width: 200px;
}

Sass 的 @for 循環中有兩種方式：

@for $i from <start> through <end>
@for $i from <start> to <end>

這兩個的區別是關鍵字 through 表示包括 end 這個數，而 to 則不包括 end 這個數。

4.2.2 @while循環

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

CSS爲：

.item-1 {
  width: 100px;
}

.item-2 {
  width: 200px;
}

4.2.3 @each循環

@each 循環就是去遍歷一個列表，然後從列表中取出對應的值。
@each 循環指令的形式：

@each $var in <list>

例子：

$list: primary info error warning;
@each $item in $list{
  .item-#{$item}{
    font-size:12px;
  }
}

CSS爲：

.item-primary {
  font-size: 12px;
}

.item-info {
  font-size: 12px;
}

.item-error {
  font-size: 12px;
}

.item-warning {
  font-size: 12px;
}

5. 常用函數

5.1 字符串函數

• unquote($string)：刪除字符串中的引號；
• quote($string)：給字符串添加引號。

5.2 數字函數

• percentage()：將一個不帶單位的數字轉換成百分比形式
• round()：將一個數四捨五入爲一個最接近的整數
• ceil()：將一個數向上取整
• floor()：講一個數向下取整
• abs()：返回一個數的絕對值

5.1 列表函數

• length($list)：返回一個列表中有幾個值
• nth($list,$n)：指定列表中某個位置的值
• unitless()：判斷一個值是否帶有單位，不帶單位返回true，帶單位false

5.1 顏色函數

lighten() 和 darken() 兩個函數都是圍繞顏色的亮度值做調整的，其中 lighten() 函數會讓顏色變得更亮

//SCSS
.lighten {
    background: lighten($baseColor,10%);
}
.darken{
    background: darken($baseColor,10%);
}