變數 Variable

在 scss 裡面可以使用到變數，在你時常會撰寫到的程式碼上面，可以使用到變數的功能。

變數的語法是這樣： $變數名稱: 值; (如下)

//變數設定語法
$title-color: #666;
$content-color: #888;

//套用變數
.header{
  h2{ 
    color: $title-color;  
  }
  p{  
    color: $content-color;  
  }
}

//編譯結果
.header h2{  
  color: #666; 
}
.header p{  
  color: #888;  
}

常用變數

在製作專案拿到設計稿時，可以先觀察這份設計稿有沒有什麼共通的地方，例如：字型、文字顏色等..

常用的變數設定：

$title-color: #444; //預設標題顏色
$text-color: pink; //預設文字顏色
$link-color: #000; //文字連結樣式，多則就再加紹數字
$link-color-hover: #fff; //滑鼠拖曳過後的樣式顏色
$font-size: 13px; //全域字型大小，可以增加尺寸 EX: $font-size-l $font-size-m $font-size-s
$line-height: 1.8; //全域行距
$container-width: 960px; // 網站整體寬度
$font-style： Microsoft JhengHei; //全域字型

明亮度

在 scss 當中可以使用 darken、lighten 來讓顏色加深或變淺。

Demo 範例

//lighten語法
------
lighten(色碼,%數)
darken(色碼,%數)


//範例
------
.box1{
  background-color: lighten(色碼,%數);
}
.box3{
  background-color: darken(色碼,%數);
}