<!-- # 親愛的，我把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