使用sass總結

上個學期就開始用sass寫項目了，當時想完完全全的看一遍sass的代碼內容，半途而廢。這次寫項目再次用到sass，想把一些可能會用到的特性總結一下
以下是我項目中用的比較多，或者個人覺得比較重要的特性。

1、可嵌套性（這個是基礎，用的太多太多了，必須掌握）

Sass 中提供了選擇器嵌套功能，但這也並不意味着你在 Sass 中的嵌套是無節制的，因爲你嵌套的層級越深，編譯出來的 CSS 代碼的選擇器層級將越深，這往往是大家不願意看到的一點。這個特性現在正被衆多開發者濫用。

2、變量：變量以$開頭

通常網站會有基礎變量，譬如基礎字體，基礎色調等，可以將他們賦值給一個變量，以後調用變量就好了，很類似js裏的變量

3、混合宏：@mixin

如果你的整個網站中有幾處小樣式類似，比如顏色，字體等，在 Sass 可以使用變量來統一處理，那麼這種選擇還是不錯的。但當你的樣式變得越來越複雜，需要重複使用大段的樣式時，使用變量就無法達到我們目了。可重用性高，可以注入任何東西 　　　　　　
注意點：

• 可以相互調用，但是不能拿自己調用自己，形成遞歸
• 通過@include引用

例子：

@mixin banner {                　　　　　　　　　　
   width: 100%;                　　　　　　　　　　
   position: relative;                　　　　　　　　　　
   color: $deeepBlue;                　　　　　　　　　　
   .banner-content {                    　　　　　　　　　　　　
   	position: absolute;                    　　　　　　　　　　　　
   	top: 50px;                    　　　　　　　　　　　　
   	width: 100%;                　　　　　　　　　　
   }	            　　　　　　　　
}            　　　　　　　　
.lead-banner {                　　　　　　　　　　
@include banner;            　　　　　　　　
}

4、@extend：允許一個選擇器繼承另一個選擇器

例子:

.a1 {                　　　　　　　　　　
	color: blue;            　　　　　　　　
}            　　　　　　　　
.a2 {                　　　　　　　　　　			
	@extend .a1;                　　　　　　　　　　
	font-size: 12px;            　　　　　　　　　　
}

5、引用父元素&：在編譯時，&將被替換成父選擇符（常用）

例子:

a {                    　　　　　　　　　　
	font-size: 20px;                    　　　　　　　　　　
	text-decoration: none;                    　　
	&:hover {                        　
		text-decoration: underline;                    　　
	}                　　　　　　　　
}            　　　　　　

編譯後:

a {                    　　　　　　　　　　
	font-size: 20px;                    　　　　　　　　　
　	text-decoration: none;                　　　　　　　　　
}                　　　　　　　　
a:hover {                    　　　　　　　　　　
　	text-decoration: underline;                　　　　　　　　　
}

6、計算功能（會用 但是不多吧）

例子:

p {                　　　　　　　　　　
	margin: 20px + 30px;                　　　　　　　　　　
	width: (100% / 6)；            　　　　　　　　
}        　　　

編譯後：

p {                　　　　　　　　　　
	margin: 50px;                　　　　　　　　　　
	width: 16.6666666667%;            　　　　　　　　
}

7、function:函數功能，用戶使用@function可以去編寫自己的函數（不是特別常用）

使用語法： 使用 @function+函數名稱，每個函數都需要有返回值的內容 　　　　　　
例子:

@function du($r) {                    　　　　　　　　　　
	@return $r*2                　　　　　　　　
}                　　　　　　　　
.a8 {                    　　　　　　　　　　
	border: solid #{du(2)}px red;                　　　　　　　　
}    　

8、組合連接： #{} ： 變量連接字符串（不是特別常用）

例子：

$name: foo;            　　　　　　　　
$attr: border;            　　　　　　　　
p.#{$name} {                　　　　　　　　　
	#{$attr}-color: blur;            　　　　　　　　
}      　　　　

被編譯爲：

p.foo {                　　　　　　　　　　
   border-color: blur;            　　　　　　　　
}    　　　　

9、循環語句：（很少用到）

例子：

@for $i from 1 to 10 {                　　　　　　　　　　
   .a5_img#{$i} {                    　　　　　　　　　　　　
   	background-image: url('images/img#{$i}.png');     　
   }            　　　　　　　　
}            　　　　　　　　
@while $j>0  {                　　　　　　　　　　
   .a5_img#{$j} {                    　　　　　　　　　　　　
   background-image: url('images/img#{$j}.png');     
   }                　　　　　　　　　　
   $j:$j - 1;            　　　　　　　　
}            　　　　　　　　
@each $item in 1,2,3,4,5 {                　　　　　　　　　　
   .a5_img#{$item} {                    　　　　　　　　　　　　
   background-image: url('images/img#{$item}.png');     　　
   }            　　　　　　　　
}    　　　　

10、if語句：（很少用到）

例子：

@mixin bgcolor($b) {                　　　
	@if($b==5) {                    　　　　　
		background-color: #fff;                　　
	} @else if($b == 6) {                    　　　　　　　
		background-color: green;                　　　　　　　　　　
	} @else {                    　　　　　
		background: blue;                　　　　　　
	}            　　　　　　　
}

總結

• 目前用的最多的或者個人覺得比較重要點，以後可能會用到的大概是這10個吧，sass還有其他的特性，但是就目前來說使用頻率不高。
• 還有一點需要注意，引用sass是使用@import，sass編譯有一個特點，就是當一個sass或scss的文件名以下劃線_開頭，那麼這個文件就不會被編譯。
• sass與scss的區別：（其實是一種東西）
  1. scss是sass3引入的新語法，語法完全兼容css3， 繼承了sass的功能
  2. scss和sass大部分語法相同，唯一不同的是，scss需要使用分號和花括號，sass是以嚴格的縮進式語法縮寫—換行和縮進
  3. 文件擴展名不同