---
# System prepended metadata

title: 變數與Mixin
tags: [SCSS]

---

###### tags: `SCSS`
# 變數與Mixin
- 減少重複的屬性
- 模組化管理
## &符號
```css=
a {
    color: red; 
    &:hover {   
        color: red;
    }

    &.active{  
        color: blue;
    }
}
```
## 變數$
```css=
$text-s: 14px;
$text-l: 36px;

p {
    font-size: $text-s;    
}
p{
    font-size: $text-l;    
}
``` 
## Mixin
```css=
@mixin img-size($w, $h) {
    width: $w;
    height: $h;
}
img {
    @include img-size(200px, 200px);
}
```