關于SASS的學習總結

前言

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

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

導入文件

@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

@each循環

語法為：@each $var in

多個字段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; 
}

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com