SASS學習總結

前言

SASS是一種CSS預處理器（css preprocessor）。它的基本思想是，用一種專門的編程語言，進行網頁樣式設計，而後再編譯成正常的CSS文件。

SASS提供四個編譯風格的選項：

• nested：嵌套縮進的css代碼，它是默認值。
• expanded：沒有縮進的、擴展的css代碼。
• compact：簡潔格式的css代碼。
• compressed：壓縮後的css代碼。

導入文件

@import命令，用來導入外部文件。

　　@import "path/filename.scss";

若是導入的是.css文件，則等同於css的import命令。

註釋

sass有兩種註釋方式，一種是標準的css註釋方式/* */，另外一種則是//雙斜杆形式的單行註釋，不過這種單行註釋不會被轉譯出來。

1 變量

SASS容許使用變量，全部變量以$開頭

普通變量

定義以後能夠在全局範圍內使用。

默認變量

sass的默認變量僅須要在值後面加上!default便可。

sass的默認變量通常是用來設置默認值，而後根據需求來覆蓋的，覆蓋的方式也很簡單，只須要在默認變量以前從新聲明下變量便可

默認變量的價值在進行組件化開發的時候會很是有用。

特殊變量

通常咱們定義的變量都爲屬性值，可直接使用，可是若是變量做爲屬性或在某些特殊狀況下等則必需要以#{$variables}形式使用。

多值變量

多值變量分爲list類型和map類型，簡單來講list類型有點像js中的數組，而map類型有點像js中的對象

全局變量

在變量值後面加上!global即爲全局變量。這個目前還用不上，不過將會在sass 3.4後的版本中正式應用。目前的sass變量範圍飽受詬病，因此纔有了這個全局變量。

2 嵌套(Nesting)

sass的嵌套包括兩種：一種是選擇器的嵌套；另外一種是屬性的嵌套。咱們通常提及或用到的都是選擇器的嵌套。

在選擇器嵌套中，可使用&表示父元素選擇器

屬性嵌套：所謂屬性嵌套指的是有些屬性擁有同一個開始單詞，如border-width，border-color都是以border開頭。

.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

@at-root：sass3.3.0中新增的功能，用來跳出選擇器嵌套的。

3 混合(mixin)

sass中使用 @mixin 聲明混合，能夠傳遞參數，參數名以$符號開始，多個參數以逗號分開，也能夠給參數設置默認值。聲明的 @mixin 經過 @include 來調用

多個參數mixin

調用時可直接傳入值，如 @include 傳入參數的個數小於 @mixin 定義參數的個數，則按照順序表示，後面不足的使用默認值，如不足的沒有默認值則報錯。除此以外還能夠選擇性的傳入參數，使用參數名與值同時傳入。

多組值參數mixin

若是一個參數能夠有多組值，如box-shadow、transition等，那麼參數則須要在變量後加三個點表示，如$variables...。

@content

@content在sass3.2.0中引入，能夠用來解決css3的@media等帶來的問題。它可使@mixin接受一整塊樣式，接受的樣式從@content開始。

 //sass style
//-------------------------------                     
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

//css style
//-------------------------------
@media only screen and (max-width: 480px) {
  body { color: red }
}

** @mixin 經過 @include 調用後解析出來的樣式是以拷貝形式存在的，而下面的繼承則是以聯合聲明的方式存在的，因此從3.2.0版本之後，建議傳遞參數的用 @mixin ，而非傳遞參數類的使用下面的繼承%。**

4 繼承

sass中，選擇器繼承可讓選擇器繼承另外一個選擇器的全部樣式，並聯合聲明。使用選擇器的繼承，要使用關鍵詞 @extend ，後面緊跟須要繼承的選擇器。

佔位選擇器%

從sass 3.2.0之後就能夠定義佔位選擇器%。這種選擇器的優點在於：若是不調用則不會有任何多餘的css文件，避免了之前在一些基礎的文件中預約義了不少基礎的樣式，而後實際應用中不論是否使用了 @extend 去繼承相應的樣式，都會解析出來全部的樣式。佔位選擇器以%標識定義，經過 @extend 調用。

佔位選擇器的出現，使css文件更加簡練可控，沒有多餘。因此能夠用其定義一些基礎的樣式文件，而後根據須要調用產生相應的css。

//sass style
//-------------------------------
%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
  @if $lte7 {
    *zoom: 1;
  }
  &:before,
  &:after {
    content: "";
    display: table;
    font: 0/0 a;
  }
  &:after {
    clear: both;
  }
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}

//css style
//-------------------------------
#header h1,
.ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header h1{
  width:300px;
}

在 @media 中暫時不能 @extend @media外的代碼片斷，之後將會能夠。

5 函數

sass定義了不少函數可供使用，固然你也能夠本身定義函數，以 @fuction 開始。sass的官方函數連接爲：sass fuction，實際項目中咱們使用最多的應該是顏色函數，而顏色函數中又以lighten減淡和darken加深爲最，其調用方法爲lighten($color,$amount)和darken($color,$amount)，它們的第一個參數都是顏色值，第二個參數都是百分比。

// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

6 運算

sass具備運算的特性，能夠對數值型的Value(如：數字、顏色、變量等)進行加減乘除四則運算。請注意運算符先後請留一個空格，否則會出錯。另外，要注意運算單位

7 條件判斷及循環

@if判斷

@if可一個條件單獨使用，也能夠和 @else 結合多條件使用

三目判斷

if($condition, $if_true, $if_false)

for循環

for循環有兩種形式，分別爲：@for $var from through 和@for $var from to 。$i表示變量，start表示起始值，end表示結束值，這兩個的區別是關鍵字through表示包括end這個數，而to則不包括end這個數。

@each循環

語法爲：@each $var in 。其中$var表示變量，而list和map表示list類型數據和map類型數據。sass 3.3.0新加入了多字段循環和map數據循環。

多個字段list數據循環

//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; 
}
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; 
}

參考

SASS用法指南