----------------------------題外話---------------------------------

css新增HSL顏色模式，h色調（360度圓盤），s飽和度（百分比），l亮度（百分比）

eg.  

 p{
	color:hsl(270,100%,100%);
}

sass支援hsl屬性，如果直接在css中使用hsl屬性，ie678不支援此屬性，因此通過sass可以完美解決hsl瀏覽器相容問題

----------------------------------正文----------------------------------------------------

可重用的程式碼塊，稱為mixin：

可通過@include，@extend呼叫

@include用法：

@mixin .page{//@mixin宣告
     color:#f00;
}
.webpage{//@include呼叫
     @include page();
}

可新增引數，eg.

<pre name="code" class="html">@mixin col(<span style="color:#3366ff;">$width</span>){
    width:<span style="color:#3366ff;">$width</span>;
}
.webpage{
    @include col(<span style="color:#3366ff;">50%</span>);
}
 

</pre>

也可新增預設引數：

@mixin col($width<span style="color:#ff0000;">:50%</span>){
    width:$width;
}
.webpage{
    @include <span style="color:#ff0000;">col()</span>;
}

@extend用法：

當我們要實現兩個class，假設為.error和.serious-error，有一樣的屬性時，在html和css中有三種方法：

1.

<pre name="code" class="html">.error{
   color:red;
}
.serious-error{
 

<pre name="code" class="html">   color:red;

2.

在html檔案中：

....
<div class="error"></div>
<div class="error serious-error"></div>
....

3.

.error,.serious-error{
   color:red;
}
.serious-error{
   border:1px red;
}

為了在scss中實現這樣的css程式碼，要利用@extend：

.error{
    color: red;
}
.serious-error{
   <span style="color:#ff0000;"> @extend .error;</span>
    border: 1px solid red;
}

   1.支援繼承多個選擇器：

...
@extend .error, .fault
...

  連續繼承：A繼承B,C繼承A

.one {
	width:100px;height:100px;
}
.two {
	/*繼承的樣式*/
	@extend .one;
	/*獨立的樣式*/
	background:red;
	border:5px solid #000;
}
.three {
	/*繼承的樣式*/
	@extend .two;
	/*獨立的樣式*/
	padding:10px;
}

.one, .two, .three {
  /*繼承的樣式*/
  width: 100px;
  height: 100px;
}

.two, .three {
  /*獨立的樣式*/
  background: red;
  border: 5px solid #000;
}

.three {
  /*獨立的樣式*/
  padding: 10px;
}

2.使用%構建只用來繼承的選擇器

有時候你想繼承一個類名，但是並不想再在HTML中使用，就單單想寫一個能夠繼承的類名。尤其是不想讓它出現在css樣式中。我們可以用佔位符來寫一些繼承的樣式(如“%one”)，然後再通過@extend繼承，這樣就可以防止被渲染到CSS的規則集中。

#meng a%long {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

.notice {
  @extend %long;
}

<pre name="code" class="html">#meng a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

1.當繼承的class中包含如hover的狀態時，會一併繼承hover的狀態：

.myLink {
  @extend a;
}
a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

a, .myLink {
  color: blue;
}
a:hover, .myLink:hover {
  text-decoration: underline;
}

.meng .B {
	font-weight:bold;
}

.long .link {
	@extend .meng .B;
}

<span style="font-family:Arial;">3.繼承在指令中有作用域問題，無法使在指令如@media之外的選擇器繼承。</span>

<span style="font-family:Arial;"></span><pre name="code" class="html">.one {
	height:300px;
}
@media print {
  .two {
	@extend .one;
	width:300px;
  }
}

<span style="font-family:Arial;"></span><pre name="code" class="html">@media print {
	.one {
		height:300px;
	}
	.two {
		@extend .one;
		width:300px;
	}
}

sass中的@media跟css的區別：sass中的@media可以內嵌在css規則中，在生成css時才會提到樣式最高層，這樣避免重複書寫選擇器

@mixin col-sm($width:50%