---
# System prepended metadata

title: Scss
tags: [CSS]

---

###### tags: `CSS`
# Scss 
[MDN](https://www.sass.hk/docs/)
### 1. 嵌套規則 (Nested Rules):
   內層的樣式會將外層的選擇器當作為父選擇器。(避免重複輸入父選擇器，
   而且令複雜的 CSS 結構更易于管理)
   Ex:
![](https://i.imgur.com/5TmMgic.png)
等於
![](https://i.imgur.com/2Kd7jkV.png)

### 2. 父選擇器& (Referencing Parent Selectors: &):
   當需要使用嵌套外層的父選擇器時，用 & 代表嵌套規則外層的父選擇器。
   Ex:
![](https://i.imgur.com/VWv2YRt.png)
等於
![](https://i.imgur.com/u3qAGbJ.png)

### 3. 属性嵌套 (Nested Properties)
   Sass 允許將同樣的屬性名稱嵌套在命名空間中。
   Ex:
![](https://i.imgur.com/XIL26Pa.png)
等於
![](https://i.imgur.com/Ij5AFt8.png)

### 4. Mixin & Extend :
   Extend 使用時機為將重複樣式合併到同一個Class，來減少複用。
   Ex:
![](https://i.imgur.com/UtpdDj1.png)
編譯為
![](https://i.imgur.com/p7KhswL.png)
   Minxin 使用時機為有參數變數要傳遞時，才會使用到。
   Ex:
![](https://i.imgur.com/HcBgM1n.png)
編譯為
![](https://i.imgur.com/rLkQeFB.png)





