什麼! 寫 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/

Transcript

1. 什麼! 寫 CSS 也要編譯? CSS 預處理器– SASS 介紹
2. CSS 預處理器(preprocessor) 解決了什麼問題? 一. 減少複製/貼上/尋找/取代/重複輸入 二. 不用自己算 – 加減乘除運算/顏色函數 三. 提升程式碼易讀性 四. 編輯檔與發佈檔完美切割 五. 可能產生的新問題
3. 這些玩意不是大公司開發的， 而是一些設計師和工程師想的 <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="less.js" type="text/javascript"></script> 檔案名稱.styl Node.js 檔案名稱.css 2010 2009
4. 這些工具都想減少寫 CSS 時浪費生命的過程 SASS 編譯器 • 檔案名稱.scss • 檔案名稱.sass (寫法更嚴謹) • 檔案名稱.css (一般瀏覽器讀的檔案) • 檔案名稱.map (Source Map 檔案， 除錯時用來查看 sass 的對應行數) 2007
5. 學 SASS/SCSS/LESS/STYLUS之前， 要先學 CSS 嗎? 當然要哇! • 本質上還是 CSS，最後編譯出來的檔案還是 CSS • 只是多了一些東西讓你更方便的寫 CSS • 其他跟這類似的問題: • 學 HTML5 之前要先學 HTML4 嗎? • 看哈利波特 7 之前要先看哈利波特 6 嗎?
6. 開始體驗 CSS 預處理器神蹟 以 SCSS 為例
7. 一、減少複製/貼上/尋找/取代/重複輸入 @extend .about-me{ display:block;width:300px;height:100px;color:#ff0000 } .about-you{ @extend .about-me; color:#000; } (可惜無法 @extend nesting 內的東西)
8. 一、減少複製/貼上/尋找/取代/重複輸入 vars 宣告變數 $font : 'cwTeXYen', sans-serif; $font2 : 'Noto Sans TC', 'microsoft jhenghei', sans-serif; a{font-family: $font;} .box{font-family: $font2;}
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， • 不支援的屬性，在太舊的瀏覽器還是不支援
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);}
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) }
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)}
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
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%;} }
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
16. 四、編輯檔與發佈檔完美切割 開發環境的 CSS • 各式各樣的修改註解說明 • 這段先註解起來，下次可能會用到? • 亂七八糟的 tab 和空白 • 有人跟你說 css 要 minimized， 每次寫完還要另外存一份 css 出來? 上線的 CSS (理論上) • 乾淨的 • 壓縮過的 • 排整齊的 • 設定自動編譯，每次存檔時 就能得到美好的 CSS
17. 網路上看到的神作 http://codepen.io/davidkpiano/pen/woZNbB
18. 如何開始 SCSS 神蹟?
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…
20. 設定 SASS 編譯器 – 我是 Windows 使用者 我是隨插隨用派 • 安裝任一編譯工具 • Pepros https://prepros.io/ • Koala http://koala-app.com/ • 然後設定專案目錄與個別檔案的編譯組態 • 或是只使用線上編輯器 • 電腦不能安裝東西，或是不想在電腦留檔等特殊情況 • http://beautifytools.com/scss-compiler.php • https://codepen.io/pen
21. 設定 SASS 編譯器 – Dreamweaver 也姍姍來遲了 • 不想用 compass 打指令， 也不喜歡 koala, prepros 每次編 譯要等個幾秒? • Dreamweaver CC2017 起，也 可以把 SASS 編譯成 CSS 囉! • Make Dreamweaver Great again!
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 • 快樂結局 : 日後更輕鬆地維護網頁 • 悲劇結局 : 看起來都一樣，還要重新測試，花這麼多時間改幹嘛?
23. 開始寫 SASS – 您的網站專案是哪一型? 2) 從無到有製作型 1. 確認畫面視覺內容與系統流程 2. 配色跟 layout 分開，分好 Base / Layout / Module / Theme， 或是參考OOCSS, SMACSS, BEM 的遊戲規則 • 快樂結局 : 更輕鬆地維護網頁，快樂的擴充 • 悲劇結局 : 新需求一直加進來，時間又很趕，於是開始疊床架屋亂寫 你覺得別人的寫法不好，別人覺得你的寫法不好 3) 要快、要好，還要便宜型 需要的不只是 SASS
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
25. 實際應用上的問題 6. CSS 後續新增 CSS Variables 相關屬性 (跟 SASS 的寫法不同) 近代的瀏覽器也逐漸原生支援 CSS Variables，不過這瀏覽器支援度… 7. 還有更新更潮的 PostCSS，SASS 已經不夠看了。