第一次用Less就上手

Less是什麼? dry

很早就知道有CSS Preprocessors的存在但是我一直不會去用,因為寫Pure CSS的時候搭配emmet速度算是很快,所以一直原來沒有打算要用Less或Sass的意識。因為一個字DRY(don’t repeat yourself),所以我決定還是來一下好了。

光是一個Variables就是值得你考慮用CSS Preprocessors,可能會有重複用的class,或者會重複一樣的變數,或者大致上一樣只有部分不同的變數等,簡單來說它可以把很無聊的CSS變得很活用。

處理CSS的語法,事前準備

所謂處理CSS的語法,就是你可以很有系統有邏輯的編寫你的CSS規則,也可以很簡單的控制全局規劃和提高維護品質,減少重複性的代碼,在設計上也可以保持界面設計上的一致(就是你不會出現兩個不同style的標題)。

有好幾種使用的方法:

  1. 用Less.js
  2. 用command-line lessc compiler
  3. 用App轉換

用Less.js

到官方網站下載Less.js,放在head部分也有CDN版本

然後增加一個less的css,並用開發模式,這樣才會有錯誤提示。

注意,less.js必須要在servers才可以運作,你可以安裝MAMP或xampp在自己的電腦上,或者直接用線上的主機也可以。

用command-line lessc compiler

首先如果你是用習慣command-line,可以很快直接來用less,若不,你可以忽略這一段直接跳過,這裡沒有打算很詳細講解command-line的使用方法。
先要安裝Node.js,然後再跑以下指令

輸出CSS也簡單,直接跑以下指令

用App轉換

MAC : Less.appCodeKitCrunch!SimpLESS
Window : WinlessSimpLESS

準備完畢,開始

準備最基本的HTML文件,已經寫好一些元素來做範例:

HTML

Less
以下我們只是會修改less檔案

為何是和css一樣,沒錯,less是可以直接讀css,所以你根本不需要擔心學習成本很高,因為它其實是和css一樣的。

Variables

背景色#eee可能會重複用好幾次,所以設一個變數可以代入其他的class。

現在背景色就是eee,你可以一直重複用@primarycolor來代入任何顏色屬性。

Mixins / Parametric mixins

很多時候我們會重複一些屬性尤其是要支援多個瀏覽器的css3,一連串的重複的東西還真的很麻煩,所以直接寫個mix代入:

Parametric mixins即你可以代入自己的變數,mixin可以擁有自己的預設變數:

同樣的你可以擁有很多不同的mix一起用,例如我要製作一個進入頁面時候的動畫,動畫效果要縮小到放大。

所以如果代入的時候沒有指定則是用預設的(如果有),這可以方便你寫多個animation,如果只是要寫一個,其實直接寫一個animation的mix來代入即可,沒有拆開的必要。

Media queries

最簡單的Media queries用法是設一個variables然後代入:

所以你可以很簡單的設立很語義的變數來控制不同的情況下的css樣式。例如你可以寫一個高清畫質的。

Media queries的寫法和原本的css一樣,唯一的不同是可以直接寫在對應的class裏面,而不需要再多寫一個Media queries的class。

Nested rules

這也是要用CSS Preprocessors的主要原因之一,就是有結構的寫法比較好閱讀和組織。

輸出

假設要連接母class可以用&

輸出

當然這也是有關css結構的問題,因為如果是結構起來,那麼輸出的css是header .menu li a,這樣的結構其實在google的或其他css best practices不是很建議的寫法。

consistency

之所以用變數的另外一個原因是保持整體的連貫性,例如我們設基本字體大小,然後H元素則是直接計算出來就好

Math也是less一個很強大的功能,使用得宜可以變得很輕鬆也符合邏輯。你也不需要再花心思那些計算的問題上,例如你想製作一個黃金比例:

這樣你只需要改變@BaseFont就可以同時修改其他的大小,而且比例是一致的。

Loop

假設有.content內有100個.item分別有不同的背景圖,那麼傳統的css你會複製而死!所以可以直接用loop和variables來完成。當然我們要有先建立class和圖片檔案名稱的規則

所以.span100就是對應100-n.png,如此類推。再推如果我們把背景圖的拉出來:

因為我們要對.bg處理一下,我們要預載:hover的圖,很簡單我在上篇文件Preload image有提過,用:after來完成這個工作。

輸出

Loop非常的實用如果有很多相同的元素,但是只有某部分不同,這樣可以很好的控制全局,而且也剩下很多時間。

完成的代碼

當然直接用可能不會看到什麼東西,所以還是建議大家自己動手試試看,這文件只是給大家參考。千萬不要盲目的複製而不看內容。當然Less還有很多功能,所謂第一次用就上手所以就不會介紹到太深入,有興趣可以再深入研究,不過到了這裡應該可以體會到Less的好處。

總結

  1. 和其他語言一樣重複的代碼可以一直使用。
  2. 要線上測試Less可以用lesstester.com
  3. 可以把常用的mixin寫成一份管用的mixin.less,之後直接import
  4. 可以把有關係的element寫在一起方便之後的維護和閱讀
  5. 不要過度複雜化結構,不必要的層級和變數可以省略