Upgrade to Pro — share decks privately, control downloads, hide ads and more …

什麼! 寫 CSS 也要編譯?

什麼! 寫 CSS 也要編譯?

CSS 預編譯器 – SASS 介紹
一、CSS 預處理器(preprocessor )解決了什麼問題?
二、如何開始 SCSS 神蹟
三、實際運用時遇到的問題
1.最後一版的原始檔在誰那?
2.如果有別人直接抓線上的 CSS 檔來改,下次要改 SASS 的時候會爆炸
3.編譯器更新版本,或更新專案組態之後,爆炸
4.遇到會寫 SCSS,但不會寫 CSS 的新手
5.IE 要到 IE 11 with the Windows 8.1 才支援 Souce Map,很難查行數除錯。
https://blog.user.today/scss/

jiimmysu

May 21, 2017
Tweet

More Decks by jiimmysu

Other Decks in Technology

Transcript

  1. 什麼! 寫 CSS 也要編譯?
    CSS 預處理器– SASS 介紹

    View full-size slide

  2. CSS 預處理器(preprocessor)
    解決了什麼問題?
    一. 減少複製/貼上/尋找/取代/重複輸入
    二. 不用自己算 – 加減乘除運算/顏色函數
    三. 提升程式碼易讀性
    四. 編輯檔與發佈檔完美切割
    五. 可能產生的新問題

    View full-size slide

  3. 這些玩意不是大公司開發的,
    而是一些設計師和工程師想的


    檔案名稱.styl Node.js 檔案名稱.css
    2010
    2009

    View full-size slide

  4. 這些工具都想減少寫 CSS 時浪費生命的過程
    SASS
    編譯器
    • 檔案名稱.scss
    • 檔案名稱.sass (寫法更嚴謹)
    • 檔案名稱.css
    (一般瀏覽器讀的檔案)
    • 檔案名稱.map
    (Source Map 檔案,
    除錯時用來查看 sass
    的對應行數)
    2007

    View full-size slide

  5. 學 SASS/SCSS/LESS/STYLUS之前,
    要先學 CSS 嗎?
    當然要哇!
    • 本質上還是 CSS,最後編譯出來的檔案還是 CSS
    • 只是多了一些東西讓你更方便的寫 CSS
    • 其他跟這類似的問題:
    • 學 HTML5 之前要先學 HTML4 嗎?
    • 看哈利波特 7 之前要先看哈利波特 6 嗎?

    View full-size slide

  6. 開始體驗 CSS 預處理器神蹟
    以 SCSS 為例

    View full-size slide

  7. 一、減少複製/貼上/尋找/取代/重複輸入
    @extend
    .about-me{
    display:block;width:300px;height:100px;color:#ff0000
    }
    .about-you{
    @extend .about-me;
    color:#000;
    }
    (可惜無法 @extend nesting 內的東西)

    View full-size slide

  8. 一、減少複製/貼上/尋找/取代/重複輸入
    vars 宣告變數
    $font : 'cwTeXYen', sans-serif;
    $font2 : 'Noto Sans TC', 'microsoft jhenghei', sans-serif;
    a{font-family: $font;}
    .box{font-family: $font2;}

    View full-size slide

  9. 一、減少複製/貼上/尋找/取代/重複輸入
    Autoprefix –讓編譯器編譯時,自動補上跨瀏覽器的 css prefix
    .example {
    display: flex;
    transition: all .5s;
    background: linear-gradient(to bottom, white, black);
    }
    .example {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-transition: all .5s;
    transition: all .5s;
    background: -webkit-gradient(linear, left top, left
    bottom, from(white), to(black));
    background: linear-gradient(to bottom, white, black);
    }
    • 不需要自己背各瀏覽器的 prefix、自己輸入一堆,
    • 也不需要在編輯器安裝任何 autoprefix 外掛,
    • 可以在編譯組態調整,瀏覽器版本版本幾以下補 prefix,
    • 不支援的屬性,在太舊的瀏覽器還是不支援

    View full-size slide

  10. 一、減少複製/貼上/尋找/取代/重複輸入
    @mixin 和 include
    @mixin ulclear{
    list-style:none;padding:0;margin:0
    }
    .album-list{
    @include ulclear
    }
    @mixin 和 include 和 $vars
    @mixin radius_title($bgcolor, $txtcolor) {
    background: $bgcolor;
    color:$txtcolor;
    font-weight: bold;
    font-size: 22px;
    border-radius: 30px;
    padding: 10px 0;
    text-align: center;
    }
    .form-label {@include radius_title(#82512C, #fff);}
    .rule-title {@include radius_title(#FFF41A, #624E43);}

    View full-size slide

  11. 二、不用自己算 – 加減乘除/取餘數/四捨五入
    @mixin absolute-h-center($box-width){
    position:absolute;
    left:50%;
    width:$box-width;
    margin-left: $box-width / 2;
    }
    .box{
    @include absolute-h-center(1000px)
    }

    View full-size slide

  12. 二、不用自己算 – 顏色函數
    @mixin btn ($color, $txtcolor){
    background:$color;
    border:0;
    border-bottom:3px solid darken($color, 30%);
    color:$txtcolor;
    padding:5px 15px;font-size:20px;border-radius:5px;
    }
    .btn{@include btn(#0066cc, #fff)}

    View full-size slide

  13. 二、不用自己算 – 常用的顏色函數
    .box{
    background: rgba(#000,.5); //變半透明
    background: invert(#f00); //變反向色彩
    background: lighten(#06C, 30%); //變亮
    background: darken(#06C,$amount); //變暗
    background: saturate(#06C,50%); //提高飽和度
    background: desaturate(#06C,50%); //降低飽和度
    background: grayscale($color); //灰階
    }
    http://sass-lang.com/documentation/Sass/Script/Functions.html

    View full-size slide

  14. 三、提升程式碼易讀性
    Nesting 巢狀結構 (大腸包小腸)
    .feature-wrap{
    .imgbox{
    img{….}
    }
    &:after{…}
    @media screen and (max-width:992px){…}
    @media print{…}
    }
    .wtf-wrapper{
    @media ( $w-larger : $break-lg ) {width: 900px;}
    @media screen and ( $w-smaller : 1200px ) {width: 800px;}
    @media screen and ( $w-smaller : 1000px ) {width: 100%;}
    @media screen and ( $w-smaller : 768px ) {width: 80%;}
    @media screen and ( $w-smaller : 450px ) {width: 100%;}
    }

    View full-size slide

  15. 三、提升程式碼易讀性
    @import 把外部的 scss 檔引入使用
    • 自己寫好的
    • _tables.scss
    • _forms.scss
    • _index-basic.scss
    • 或是別人寫的
    • https://github.com/twbs/bootstrap-sass/tree/master/assets/stylesheets/bootstrap
    • http://foundation.zurb.com/sites/docs/sass.html
    @import tables
    @import forms
    @import index_basic

    View full-size slide

  16. 四、編輯檔與發佈檔完美切割
    開發環境的 CSS
    • 各式各樣的修改註解說明
    • 這段先註解起來,下次可能會用到?
    • 亂七八糟的 tab 和空白
    • 有人跟你說 css 要 minimized,
    每次寫完還要另外存一份 css 出來?
    上線的 CSS (理論上)
    • 乾淨的
    • 壓縮過的
    • 排整齊的
    • 設定自動編譯,每次存檔時
    就能得到美好的 CSS

    View full-size slide

  17. 網路上看到的神作
    http://codepen.io/davidkpiano/pen/woZNbB

    View full-size slide

  18. 如何開始 SCSS 神蹟?

    View full-size slide

  19. 設定 SASS 編譯器 – 我是 Windows 使用者
    開發環境派 (以compass為例)
    1. 該裝的東西裝一裝
    • 灌 ruby
    • gem install sass
    • gem install compass
    2. 每次寫 sass/scss 時
    • 開啟 Windows 命令列提示字元
    • cd 專案目錄
    • compass watch
    • Compass 可以幫人合併 Sprite image
    • 一些比較潮的新 SASS 工具都可以 gem install…

    View full-size slide

  20. 設定 SASS 編譯器 – 我是 Windows 使用者
    我是隨插隨用派
    • 安裝任一編譯工具
    • Pepros https://prepros.io/
    • Koala http://koala-app.com/
    • 然後設定專案目錄與個別檔案的編譯組態
    • 或是只使用線上編輯器
    • 電腦不能安裝東西,或是不想在電腦留檔等特殊情況
    • http://beautifytools.com/scss-compiler.php
    • https://codepen.io/pen

    View full-size slide

  21. 設定 SASS 編譯器 – Dreamweaver 也姍姍來遲了
    • 不想用 compass 打指令,
    也不喜歡 koala, prepros 每次編
    譯要等個幾秒?
    • Dreamweaver CC2017 起,也
    可以把 SASS 編譯成 CSS 囉!
    • Make Dreamweaver Great
    again!

    View full-size slide

  22. 開始寫 SASS – 您的網站專案是哪一型?
    1) N年遺毒型/ legacy code 型 / 用舊程式一直疊床架屋型
    1. 確認 html 的命名方式、所用的 html tag 、layout、markup 方式符合近代系統架構與需求
    2. 把行內樣式,或非必要的 JS style 移到 css 檔內,
    3. 把 .css 存成 .scss 或 .sass
    4. 用前述提的 vars, nesting, mixin, include, &: 的工具把 css 改寫成 SCSS/SASS
    5. 偷吃步: 先用 css2sass 工具,先讓程式處理基本的 nesting,再用 vars, mixin, include 把
    css 改寫成 SCSS
    • 快樂結局 : 日後更輕鬆地維護網頁
    • 悲劇結局 : 看起來都一樣,還要重新測試,花這麼多時間改幹嘛?

    View full-size slide

  23. 開始寫 SASS – 您的網站專案是哪一型?
    2) 從無到有製作型
    1. 確認畫面視覺內容與系統流程
    2. 配色跟 layout 分開,分好 Base / Layout / Module / Theme,
    或是參考OOCSS, SMACSS, BEM 的遊戲規則
    • 快樂結局 : 更輕鬆地維護網頁,快樂的擴充
    • 悲劇結局 : 新需求一直加進來,時間又很趕,於是開始疊床架屋亂寫
    你覺得別人的寫法不好,別人覺得你的寫法不好
    3) 要快、要好,還要便宜型
    需要的不只是 SASS

    View full-size slide

  24. 實際應用上的問題
    1. 跟 Flash 檔案, 專案型程式, psd, ai…的問題一樣,最後一版的原始檔在誰那?
    (當組織只注重人的管理,而不注重資訊跟軟工的管理時…)
    2. 如果有別人直接抓線上的 CSS 檔來改,下次要改 SASS 的時候會爆炸
    3. 編譯器更新版本,或更新專案組態之後,爆炸
    4. 遇到會寫 SCSS,但不會寫 CSS 的人
    5. IE 要到 IE 11 with the Windows 8.1 才支援 Souce Map,很難查行數除錯。
    選擇器的效能、效率超差、檔案超大的 css code

    View full-size slide

  25. 實際應用上的問題
    6. CSS 後續新增 CSS Variables 相關屬性 (跟 SASS 的寫法不同)
    近代的瀏覽器也逐漸原生支援 CSS Variables,不過這瀏覽器支援度…
    7. 還有更新更潮的 PostCSS,SASS 已經不夠看了。

    View full-size slide