EZTABLE IDEAS 是 EZTABLE 成員揮灑熱情和大家分享專業及創意的網誌。 EZTABLE 讓消費者 24 小時都可以在網路訂位全台灣最優質的餐廳,同時提供餐廳經營者 e 化的訂位管理系統 (雲端、iPad、智慧型手機)

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

十一月 18 2011 Published by under Design, Engineering

Introduction to less

這個禮拜 EZTABLE 的讀書會,主題包括了 Twitter Bootstrap 的使用, Less – The dynamic stylesheet language, 以及 Google web font 的使用心得。趁著記憶猶新,把 Less 的重點整理一下 🙂

什麼是 Less

Less 簡介

簡單來說,Less 就是讓你在網頁設計的時候,可以更方便地寫 CSS 的工具。
這裡借用一下 Less 官網的說明:

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.

也就是說,你可以透過 Less 的語法使用 variable, mixins, operatons and functions 這些工具,再透過 compile 之後,less 就可以轉成一般的 CSS,於是讓設計 CSS 這件事可以更加地有彈性。

有必要搞得那麼複雜嗎?

「為什麼設計 CSS 需要更加有彈性呢?」你問,「CSS 不是一個純文字檔寫完就好了嗎?有必要搞得還需要 complie 那麼複雜嗎?」
是的,沒錯,CSS 原本就只是一個說明樣式的純文字檔,你可能覺得用 textmate 或 dreamwever 或 notepad 寫完就好了。但可惜的是,web design 常常不是一個用過一次就丟的東西,你可能三不五時需要去修改它。

此外,就算是在剛開始設計的階段,Less 可以提供你很多方便的工具,人家寫 5 行你只要寫 1 行;人家改一個色碼要改 9 個地方(搞不好還漏掉了一個),你只要改一個地方,而且全部沒有漏,這樣一來一回,撇開效率上的差別不談,光「奇檬子」的差別就差很大了 😛

less 提供的主要功能

Variable

我個人覺得,variable 是 Less 裡面最重要的功能。舉例來說,在設計的時候,我們常常會在很多個地方使用相同的色碼 (或是用很相近的顏色)來塑造整體的感覺,例如在 h1, h2, h3, button, link hover color, …. 。

在以往設計 CSS 的時候,我們可能需要在這些 tag 的樣式裡面做各自的設定。但現在透過 variable ,我們可以在最上面宣告一個 base color, 然後在其他地方反覆使用這個 base color。這樣網站在做設計上的調整時,就可以省下很多時間。

舉例來說,下面是 Less 的寫法:
[sourcecode language="css"]
// LESS
@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}
[/sourcecode]

下面是 complie 出來的 CSS:
[sourcecode language="css"]
/* Compiled CSS */

#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}
[/sourcecode]

Mixins

Mixins 讓你可以重覆利用某些樣式的宣告,你可以在 A 樣式裡面 include 另一個 B class, 所有被 B class 的樣式都會被 embed 進來 A 這個樣式設定。

這個最好用的地方就是在簡化一些比較不好寫的 css, 例如 CSS3 的圓角設定,目前因為 browser 的語法尚未統一,你可以需要寫:
[sourcecode language="css"]
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
[/sourcecode]

但透過 Less, 你只要寫:
[sourcecode language="css"]
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}

header {
.border-radius(4px);
}

.button {
.border-radius(6px);
}
[/sourcecode]

是的,正如你所看到, mixins 不只可以把某個 class include 進來,甚至可以在 include 的時候指定一個參數!!猜猜看現在如果你又需要一個 10 px 的 border-radius, 你還需要寫幾行?

1 行!

Nested Rules

CSS selector 裡面有一個重要的用法,叫做後代選擇器 (Descendant selectors)
也就是說,你可以用下面這段樣式去設定你 ID=header 這個 container 中, h1, p, p 下面的 a, p 下面的 a 的 hover 樣式各要怎麼設定:

[sourcecode language="css"]
#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}
[/sourcecode]

這樣的寫法雖然很好理解,但要對於編寫的人或是要修改的時候,就不是那麼方便了,因為你要改一下 header ,相關的樣式可能散佈在 CSS 檔的好幾個地方。但在 Less 裡面,我們可以有更好的做法:

[sourcecode language="css"]
#header { color: black;
.navigation { font-size: 12px }
.logo { width: 300px;
&:hover { text-decoration: none }
}
}
[/sourcecode]

Functions & Operations

通常在設計 button 的時候或是 border 的樣式的時候,我們常常會需要一個跟原本差不多的顏色。可能是亮一點點、暗一點點、或是鮮艷一點點(例如:當做 button 一般的顏色、hover 上去的顏色, 點下去的顏色)。而這樣的東西,傳統上我們是用 RGB 在調色盤上設好再設到 CSS 裡,但如果你對 HSB (色相、明亮度、飽和度)有那麼一點直覺的話,Less 裡面也可以讓你直接用 function 來設定,而 output 出來的 css,就會自動幫你算好相對應的 RGB 。例如:

[sourcecode language="css"]
// LESS

@base-color: #111;
@red: #842210;

#footer {
color: @base-color + #003300;
border-color: desaturate(@red, 10%);
}
[/sourcecode]

下面是轉出來的 CSS:
[sourcecode language="css"]
/* Compiled CSS */

#footer {
color: #114411;
border-color: #7d2717;
}
[/sourcecode]

Less 裡面提供的 functions 還包括:

[sourcecode language="css"]
lighten(@color, 10%); // return a color which is 10% *lighter* than @color
darken(@color, 10%); // return a color which is 10% *darker* than @color

saturate(@color, 10%); // return a color 10% *more* saturated than @color
desaturate(@color, 10%); // return a color 10% *less* saturated than @color

fadein(@color, 10%); // return a color 10% *less* transparent than @color
fadeout(@color, 10%); // return a color 10% *more* transparent than @color

spin(@color, 10); // return a color with a 10 degree larger in hue than @color
spin(@color, -10); // return a color with a 10 degree smaller hue than @color
[/sourcecode]

Less 的 compile 方法

要把 Less complie 成 CSS 兩種方法,一種是直接在 HTML 裡面 inlcude 一個 less.js 檔,然後就可以直接把 less 檔 include 進來。另一種是在製作 HTML 的時候,就先把 .less 檔 pre-compile 成 css 檔。 個人是建議用 pre-compile 的方式,一方面可以讓沒有 js 的人也可以使用,另一方面效率上也會比較好。

Using Less.js

先在 HTML 裡面 include less 檔
[sourcecode language="html"]
<link rel="stylesheet/less" type="text/css" href="styles.less">
[/sourcecode]

再把下面這個 script 放在 <head>
[sourcecode language="html"]
<script src="less.js" type="text/javascript"></script>
[/sourcecode]

Pre-compile

如果您是 developer,您可以在 command line 直接安裝 node.js + less (請參考這篇安裝 node.js + less 的詳細教學),並在 command line 執行:
[sourcecode language="bash"]
lessc styles.less > styles.css
[/sourcecode]

如果您是 designer 或是對 command line 不是那麼熟,可以考慮使用下面這個工具:
LESS.app
LESS.app
這個工具相當地方便,可以設定:

  • 要去哪裡找 less 檔
  • 要將 compile 好的 css 放在哪裡,
  • 多久自動 compile 一次
  • 要不要自動幫 CSS 做壓縮 (minified CSS)
  • 檢視 compile 有沒有什麼問題

Summary: 我覺得 Less 好用的地方

  • Easy to learn, backward compatible to CSS
  • 很好學,尤其是你原本就跟 CSS 很熟的話,大概只要花個 20 分鐘,你就可以跟 Less 一樣熟了!

  • 設計時用來調色
  • 設計的時候,常常需要反覆 try 怎樣的顏色出來比較適合。雖然知道主色調要用緣色,你可能還是會聽到設計師在那邊喃喃自語:再深一點點?再淺一點點?再帶一點黃色?再帶一點棕色?如果每試一次都要改全套的( button, order list, h1, h2, …),那設計師就算再有三頭六臂,也會 hold 不住的。

  • 利用 variable 節省時間
  • 什麼?網站又要改版??沒關係,有了 Less + variable, 網站改版不再是設計師的悲哀

  • For CSS3
  • 很多 CSS3 目前的語法還搉需要為各家瀏覽器寫上特別的語法,例如:rounded corners, box shadow, transition 等等,如果把這幾個用 LESS 先包好,是不是就省事多了呢? 😉 (from Twitter Bootstrap)

    [sourcecode language="css"]
    /*Rounded Corners*/
    .roundedCorners (@radius: 12px) {
    -moz-border-radius: @radius;
    -webkit-border-radius: @radius;
    border-radius: @radius;
    }

    /*Box Shadow*/
    .boxShadow (@hor: 3px, @vert: 2px, @blur: 5px, @shadow: #757171) {
    -webkit-box-shadow: @hor @vert @blur @shadow;
    -moz-box-shadow: @hor @vert @blur @shadow;
    box-shadow: @hor @vert @blur @shadow;
    }

    /*Transition*/
    .transition (@range: all, @time: 1s, @ease: ease-in-out) {
    -moz-transition: @range @time @ease;
    -webkit-transition: @range @time @ease;
    -o-transition: @range @time @ease;
    transition: @range @time @ease;
    }
    [/sourcecode]

一些使用 Less 的 Q & A

有了 Less 我就不用學 CSS 了嗎?

還是要學 CSS! 你還是需要會寫 CSS,Less 只是幫你省下一些功夫,大部份的樣式你還是要知道 CSS 要怎麼設,不然如果 compile 出來的

如果 Less 轉出來的 CSS 不是我要的怎麼辦?

自己來! 所有的 CSS 語法都是合法的 Less 語法,所以你可以直接把你要的 CSS 放進 Less, 不要透過 Less 來轉

如果我去改寫 Less compile 出來的 css,會不會下次重新 compile 的時候都被 override 掉?

會! 同上,所有的 CSS 語法都是合法的 Less 語法,所以你可以直接把你要的 CSS 放進 Less, 這樣 compile 出來的 CSS 就會有你想要指定的樣式

Less 的參考網址

brooky
EZTABLE Co-Founder & CTO
2011年 11月 18 日

Related Posts Plugin for WordPress, Blogger...

No responses yet

發表迴響