SASS+SCSS-2變數+@import+@mixin

5.變數variable:

5-1比如一個檔案裡有多個連結裡文字本來都是#9900FF，但突然客戶通通想要修改成#55AA00一個個去修改會很沒有效率，這個時候就可以使用變數。

5-2參數規則為 $(隨機命名):參數;，如$clickcolor:color: #9900FF;。

5-3把$clickcolor複製起來，貼到要改變class裡的color後面，儲存後css檔裡就會改變。

5-4如果要改顏色改，如$clickcolor:color: #9900FF;裡的顏色參數即可。


5-5通常會用在字形、顏色VI主色系、行距、粗體等等 

5-6可以用加減乘除，乘號（*）

【scss檔】

$linkcolor:#55AA00;
$font-l:18px;
$font-m:16px;
$font-s:14px;
$title-base:20px;
$title-large:$title-base*1.2;
$title-small:$title-base*0.8;

.header a{
color:$linkcolor;
    font-size: $title-small;
}

.content a { 
color:$linkcolor;
 font-size: $font-l; }

.footer a {
color: #9900FF;

}

【css編譯結果】
.header a {
  color: #55AA00;
  font-size: 16px; }

.content a {
  color: #55AA00;
  font-size: 18px;}

.footer a {

  color: #9900FF; }

6.@import 將每個區塊獨立拆開
6-1寫網頁時候區塊很多越往下寫越長要修改尋找很麻煩，也很多會重複區塊比如reset、header、footer，每次都要重寫也會很不方便。所以把每個區塊單獨拆開，在用@import把他組合起來。
6-2通常最後全部載入會在all.scss檔案裡
6-3要拿來載入檔案命名規則_(命名).scss，比如_reset.scss、_header.scss、_footer.scss。
6-4在a11.css裡輸入 @import url();

@import 'reset';

@import 'index';

6-5儲存之後即可合併

7.@mixin
7-1 css有很多常用技巧像各種清除浮動clearfix、各種瀏覽器解決方案、logo文字取代等等，每次要一一回想很多細節很耗時耗力，所以會建立一個自己資料庫，看@mixin可以知道工程師程度，經歷過怎樣專案，對css了解程度。

7-2大型專案會另外建立一個mixin資料夾。

7-3@mixin命名規則: @mixin (隨機命名) {.....}

7-4呼叫辦法: .class {@include(隨機命名mixin);}

7-5@mixin可以建立變數

【scss@mixin】
建立@mixin
@mixin a-logo {

    position:absolute;
    top:px;
    left:px;
}

@mixin a-logo-a{
display:block;
width:px;
height:px;
text-indent:-99999px;
background:url(../images/M1.png)

}

@mixin circle($size,$background-color){

border-radius: 50%;
height: $size;
width: $size;
font-size: $size/2;
background: $background-color;

}

以下為呼叫@mixin

.logo{
@include a-logo;
}

.logo a{
@include a-logo-a;
}

.redcircle{
@include circle(15px,#AA0000)


}

【@mixin在css轉譯效果】

.logo {
  position: absolute;
  top: px;
  left: px; }

.logo a {
  display: block;
  width: px;
  height: px;
  text-indent: -99999px;
  background: url(../images/M1.png); }

.redcircle {
  border-radius: 50%;
  height: 15px;
  width: 15px;
  font-size: 7.5px;

  background: #AA0000; }

<參考資料>30天掌握Sass語法(廖洧杰)
                      [ Alex 宅幹嘛 ] 👨‍💻從 CSS 到 SASS (SCSS) 超入門觀念引導