CSS已經是網頁設計必備的技能,利用CSS定義網頁的排版、顏色、字型等等,在和程式設計師合作時可以避免在修改頁面時誤觸程式。只是網站越大,CSS很可能會越寫越雜,管理和修改也就變得很繁瑣。

前陣子才發現有個東西叫做Less,可以建立動態的CSS,有點像是在寫程式,意思是將一些會重複用到的設定,比如說顏色或寬度之類的寫成一個參數,要用的時候把這個參數值寫進去就可以 (由視覺優先的人來解釋簡直就是誤人子弟><),這麼好用的東西現在才知道有點遜掉了。

我在找資料的過程中遇到了一個問題,不管是Less或是Sass都需要在server端安裝程式才能將less檔轉換成標準的CSS,以一個web designer來說有點難度,這種好東西一定有其他辦法可以輕鬆轉換才是。終於讓我找到了,而且非常簡單。

下面四種Less轉換CSS的工具我有安裝,都簡單好用,喜歡哪一種自己玩玩看囉。

1. Crunch: 需要先安裝adobe AIR,有adobe設計軟體的朋友應該會有這個。介面簡單典雅又漂亮(我果然是視覺優先的傢伙><),可以直接在工作介面上寫,也可以匯入已經寫好的less或資料夾進行轉換

2. Simpless: 安裝後會出現一個小小的簡單的工作介面,把寫好的less檔或資料夾拖曳到工作介面裡進行轉換

3. winless: 安裝後就是跟windows視窗長得一樣(沒有前兩種漂亮的設計就是了),同樣也是匯入資料夾進行轉換,我比較偏好這個

2. 梅問題教學網:梅干老師提到dreamweaver也有外掛可以用,馬上就能輕鬆轉換;但我在win7安裝好外掛之後,沒有出現在dreamweaver,不知道是不是有版本問題,因為最後決定用winless,所以就沒再找問題出在哪。

接觸Less的時間不長,以下是我目前的使用心得:

用Less得完全自己寫CSS,如果已經很熟CSS倒是沒什麼問題,剛開始寫Less還是要回到dreamweaver看一下,不過熟能生巧,以前不太注意的CSS寫法,也就順便記下來了,常寫就不是什麼大問題。

我個人覺得Less最好用的寫法就屬Nested rules,以官網提供的範例來說,所有在header要做的設定一階一階很有組織的往下寫,轉換的CSS整齊有條理看起來很舒服;Variables的寫法也滿好用的,尤其是顏色,在寫CSS時,需要之前用過的色號總是要回頭找,這時less就很方便,可以先定義常用的顏色不用花時間回頭找。其他過於複雜的寫法我還是跳過了,我會想學less是因為有調理的階層組織清楚明白, 而且共用的設定可以先一次寫好,需要的時候再帶入的優點。

當網頁架構很龐大的時候,清楚有條理的CSS可以幫助工作夥伴快速分辨各個區塊的設定,但是你的工作夥伴也需要會用Less;這應該會比較適合獨立作業的人使用,不然很可能你的工作夥伴會因為直接修改轉換後的CSS在沒告知你的情況下,你則會在下次修改Less檔時覆蓋掉工作夥伴修改的CSS,那會是一場災難吧。如果網站不大,用less就反而有點多餘^^",不過多認識一種工具算是增長知識囉。

不管是用哪一種工具,妥善運用才能提高工作效率。

我在學Less時找到一些資料提供有興趣的朋友參考:

1. Less: 官方網站

2. Get Into LESS: the Programmable Stylesheet Language

3. [JavaScript] [CSS] LESS.js 介紹

4. 不要盲目的在項目中使用LESS CSS

5. 好用的 CSS 工具:Less CSS framework 介紹

文章標籤
創作者介紹

一個人的聚光燈

月光獨舞 發表在 痞客邦 PIXNET 留言(0) 人氣()