Sass 簡介

Sass stands for Syntactically Awesome Stylesheets Sass, and was
created by Hampton Catlin. It’s a way to simplify your CSS workflow,
making development and maintenance tasks easier.
Sass是一個能夠CSS預編譯的工具，能夠提升開發效率。

Sass 語法

1. 變數
   變數通過$+變數名來定義

   $font-color:yellow;
   body{
   font-color:$font-color;
    
   
   }

   編譯後

   body{
   font-color:yellow;
   }

2. 巢狀

   nav{
       font-size:16px;
       ul{
       font-size:14px;
       {
   }

   編譯後

   ```
   nav {font-size:16px;}
   nav ul{ font-size:14px;}
   ```
   

3. Sass部件
   如果以下劃線_開頭的scss檔案，會被認為是sass的一部分，不會編譯成.css檔案。和import一起用。
   

4. import

   import的時候不用加.scss字尾sass可以自動識別。

5. Mixins

   函式定義方式:@mixin + 函式名稱+ 引數，可以傳入引數，通過@include來呼叫並傳入引數。
   

   
   編譯後：
   

6. Extends/Inheritance

   通過@extend關鍵字來繼承一些公有屬性。
   
   編譯後：
   

7. Operators 操作符

   包括加減乘除和%.

   
   編譯後：