# Sass 學習筆記

### 寫scss的方式

/* scss */
header{
    h1{
        color: #red;
    }
    a{
        background: #blue;
        &:hover: #black;
    }
}

編譯成css

header h1{
    color: #red;
}

header a{
    background: #blue;
}

header a:hover{
    background: #black;
}

---

### 管理方式
通常會先很多支scss然後程式碼的方式引入到該專案主要的_main.scss來運用,寫完之後再將_main.scss引入到all.scss然後進行編譯成一支all.css

分支的scss檔案前面需加_
Ex:
**_valuable.scss** (可用來設定一下顏色或文字大小的變數)
**_main.scss** (引用其他分支來撰寫的主要分支,加上自己寫的code之後再引入到all.scss進行編譯)
**_mixin.scss** (可用來紀錄一些不好記的code,像是文字取代圖片的整個code)

**all.scss** 檔名前面不需要加_

引入的方式 @import "檔名"
Ex:

@import "_variables";
@import "_mixin";

---

### 變數
將常用到的顏色或文字大小等等宣告成變數,之後若要修改可以針對變數修改,就能一次改到所有相同變數名稱的顏色。

/* 宣告變數 */
$primary: #blue;
/* 使用變數 */
header{
    h1{
        color: $primary;
    }
}
/* 等於 */
header h1{
        color: #blue;
}

---

### 沒記性要用Mixin
將常用或是記不住的技巧存起來,要使用時可以直接引入來使用

記錄方式

/* 紀錄 */
@mixin whiteSize{
    color: #fff;
    font-size: 18px;
}
/* 引入 */
header{
  h1{
    background: #faa;
    @include whiteSize;
  }
}
/* 等於 */
header h1{
    background: #faa;
    color: #fff;
    font-size: 18px;
}

---
### Mixin搭配參數的技巧

/* 紀錄 */
@mixin color($color){
    color: $color;
    background: $color;
}
/* 引入 */
.box{
    @include(#red);
}
/* 等於 */
.box{
    color: #red;
    background: #red;
}

也可以帶入多個參數,需注意參數若有幾個,引用時帶入的參數就需幾個

/* 紀錄 */
@mixin color($color,$size){
    color: $color;
    background: $color;
    font-size: $size;
}
/* 引入 */
.box{
    @include(#red,18px);
}
/* 等於 */
.box{
    color: #red;
    background: #red;
    font-size: 18px;
}

甚至還可以運算

/* 紀錄 */
@mixin color($color,$size){
    color: $color;
    background: $color;
    font-size: $size * 2;
}
/* 引入 */
.box{
    @include(#red,18px);
}
/* 等於 */
.box{
    color: #red;
    background: #red;
    font-size: 36px;
}

---
### 搭配@content做RWD超好用
使用Mixin儲存時若希望先不要帶入內容,可以搭配@content,等引入的時候再加入要使用的樣式

/* 紀錄 */
@mixin pad{
    @media (max-width:992px){
        @content
    }
}
@mixin mobile{
    @media (max-width:767px){ 
        @content
    }
}
/* 引入 */
.box{
    @include pad{
        width: 30px;
    }
}
.box1{
    @include mobile{
        width: 60px;
    }
}
/* 等於 */
@media (max-width:992px){
 .box{
      width: 30px;
    }
}
@media (max-width:767px){
 .box{
      width: 60px;
    }
}

---

## sass 載入font-face

@font-face
	font-family: 'JaguarJC-Book'
	src: url('../fonts/JaguarJC/Book/JaguarJC-Book.woff2') format('woff2')
	src: url('../font/JaguarJC/Book/JaguarJC-Book.woff') format('woff')
	src: url('../font/JaguarJC/Book/JaguarJC-Book.ttf') format('truetype')
	src: url('../font/JaguarJC/Book/JaguarJC-Book.svg') format('svg')
	font-weight: normal
	font-style: normal