<!--
# 親愛的,我把CSS模組化了:SASS/Compass
-->
## 親愛的,我把CSS模組化了:SASS/Compass
Eden 2017.09.08
---
## 議程
1. What is the Sass ?
2. 我已經會 CSS 了,為什麼還要學 Sass ?
3. Sass Syntax
4. Compass
5. PostCSS
6. One Sample - BMI Calculator
7. Q & A
---
## What is the Sass?
---
- **S**yntactically **A**wesome **S**tyle**s**heets - 語法上令人敬畏的樣式表
- 是一種樣式表語言,是一個穩定、超強、專業的CSS擴展語言。
- Sass必須透過編譯器,轉換成CSS,然後給HTML去做搭配使用。
---
## 我已經會 CSS 了,為什麼還要學 Sass?
---
- 更了解 CSS 架構
- 不再重複造輪子
- 寫 CSS 的時間大幅縮短
- 更容易管理、整合大型框架
- 從此開始,更容易了解其他技術
---
## Sass Syntax
---
### Variable
```sass
$primaryColor: #FFD366
.footer
background: $primaryColor
```
---
### Mixin
```sass
=size($w, $h)
width: $w
height: $h
.result
a
display: inline-block
+size(120px, 120px)
```
---
### extend
```sass
.message
border: 1px solid #ccc
padding: 100px
color: #333
text-align: center
.success
@extend .message
border-color: green
.error
@extend .message
border-color: red
```
---
### Directive
#### @if、@else
```sass
$debug: true
*
@if debug
border: 1 solid #000
```
---
### Directive
#### @for
```sass
li
@for $i from 1 through 4
&:nth-child(#{$i * 2})
margin-left: 20px
```
---
### Directive
#### @each
```sass
@each $evaluation in $evaluations
.result-#{$evaluation}
+result-evaluation(nth($evaluationsColor, $evaluations-idx), nth($chiEvaluations, $evaluations-idx))
$evaluations-idx: $evaluations-idx + 1
```
---
### Directive
#### @while
```sass
$idx: 2
@while $idx < 5
&:nth-child(#{$idx * 2 - 1})
font-size: 16px
$idx: $idx + 1
```
---
### import
```sass
@import "base/mixin"
.result
a
display: inline-block
+size(120px, 120px)
```
---
### Math
```sass
input[type=number]
background: $auxiliaryColor + 30
border: 2px solid $primaryColor
```
---
### Color
```sass
a
display: inline-block
+size(120px, 120px)
background: $primaryColor
color: $auxiliaryColor
&:hover
box-shadow: 0 1px 6px 3px opacify($primaryColor - 30, 0.64)
```
[http://sass-lang.com/documentation/Sass/Script/Functions.html](http://sass-lang.com/documentation/Sass/Script/Functions.html)
---
### RWD
```sass
img
position: absolute
bottom: 7%
left: 45%
display: inline-block
border-radius: 50%
+size(20px, 20px)
border: 2px solid $auxiliaryColor
cursor: pointer
@media screen and (max-width: 992px)
left: 40%
@media screen and (max-width: 767px)
left: 46%
```
---
## Compass
---
主要是針對CSS3,import後利用mixin來寫一些針對CSS3的語法,可解決一些跨瀏覽器語法的問題。也可以做Layout,or 一些基本設定。
---
範例:border-radius的CSS3使用
```sass
@import compass
.button
+border-radius(10px)
+opacity(0.7)
```
---
不過 Compass 已經確定不再維護,取而代之的是 PostCSS。
---
## PostCSS
---
PostCSS 本身就是 .css ,只是透過工具去優化目前的 CSS。
- autoprefixer
- lost
- cssnext
- precss
---
## One Sample - BMI Calculator
[https://github.com/eden90267/bmi-calculator](https://github.com/eden90267/bmi-calculator)
---
## Q & A
---
## END
{"metaMigratedAt":"2023-06-14T14:16:19.971Z","metaMigratedFrom":"YAML","title":"Untitled","breaks":"true","slideOptions":"{\"transition\":\"slide\"}","contributors":"[]"}