用 LESS 寫 CSS ( 入門、Import、變數 )

猶記部落格創立之初,是用 SASS 這個基於 Ruby on rails 的 CSS 預處理器來撰寫 CSS ( 不過個人寫程式喜好還是傾向 SCSS ),當初還寫了一些跟 SASS 有關的文章,不過後來覺得實在太麻煩,要用 SASS 還必須要先裝 Ruby 還有一堆哩哩摳摳的環境問題,加上部落格已經完全改用 NodeJS 為基底的 gulp 來實作,貌似再安裝 SASS 又有點多此一舉了,所以就直接轉戰 LESS 這套以 JavaScript 為基底的預處理器 ( BootStrap 也是用 LESS ),除了可以用 gulp-less 來作轉換,更不需要安裝任何東西 ( 當然 NodeJS 還是得裝 ),就算你都不安裝,載一個 less.js 放在網頁裡面就可以直接撰寫 less 在網頁裡面跑,相當的方便好用,就這樣一寫就寫了半年以上,也算是有點心得,可以來寫幾篇 LESS 教學,順便記錄一下。

就是要玩 LESS (1)

這篇並不是要描述 SASS 和 LESS 哪個好哪個壞,畢竟 CSS 就是 CSS,不管你用哪種預處理器來寫,最終都還是會變成 CSS,因此最重要的是 CSS 的撰寫觀念,所有的預處理器都只是輔助而已,CSS 寫得好,預處理器就是扮演如虎添翼的角色,以下就來認識一下 LESS 吧!


安裝 LESS

要用 LESS 有幾個方法,第一個最簡單,就是去 LESS 的官方網站下載 less.js,放在你的網頁裡面,就可以直接撰寫副檔名為 .less 的檔案,less.js 會自動在網頁載入的時候將其編譯為 CSS ( 就像下面的例子就可以直接編譯 ),不過 less.js 就算是 min 的版本也要一百多 KB,我看還是乖乖轉換成 CSS 比較實在。( LESS 官網:http://lesscss.org/ )

<link rel="stylesheet/less" type="text/css" href="要轉換的檔案.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

第二種方法就是用 NodeJS 的方式安裝,我自己比較喜歡用 gulp 來實作,先 npm install gulp 和 gulp-less ( 安裝方法請參考 Gulp 學習 1 - 安裝與執行 ),gulp less 的使用方式很簡單,只要 require gulp less,然後在 pipe 裡面使用,就可以進行轉換,後面再加上一個 watch 的 task,幫助我們可以在存檔的當下就進行轉換動作。
gulp-less:https://www.npmjs.com/package/gulp-less

var gulp = require('gulp'),
        less = require('gulp-less');

gulp.task('less',function(){
    gulp.src('./style/less/*.less')
    .pipe(less())
    .pipe(gulp.dest('./style/css/'))
    });

gulp.task('watch',function(){
    gulp.watch('./style/less/*.less',['less']);
    });

gulp.task('default',['less','watch']);


起手式

LESS 使用上也是巢狀的概念,下一層的就會自動轉換出來,不需要寫個好幾次,但其實像 SASS 和 LESS 這種巢狀結構往往也會造成一些不好的 CSS 結構,因為比較好的 CSS 最多不要超過三層,但在寫 LESS 巢狀往往寫得太爽就忽略了,這也是用 LESS 需要熟練的地方。


&和 SASS 的用法差不多,就是可以直接繼承,如果像下面的例子,兩個&&則是會把一系列選擇器許出的標籤或樣式全部合併在一起。


import

LESS 可以 import 別隻 less 的檔案,最後一起輸出成 CSS,在下面的例子就是把 tt.less 這隻檔案引入使用。


變數

LESS 的變數使用「@」開頭 ( SASS 使用 $ 開頭 ),變數其實很方便,因為可以重複使用,可以將常用的變成變數的形式,可以省下很多時間。


覆蓋變數

雖然 LESS 具有變數機制,但如果我們在一段大括號內把這個變數覆蓋了 ( 賦予新值 ),在這個大括號內的所有變數都會被影響到,以下面的例子來說,原本@color-red應該是紅色,但是在.text-blue的大括號裏把它變成藍色,導致在.text-blue裡面所有用到@color-red的地方都變成藍色了。( 但在大括號外面的就影響不到了 )


變數載入變數

會使用基本變數之後,變數也可以載入變數,看起來就像兩個 @@ 一樣 ( 因為 markdown 轉 html 把 @@ 消失了,要使用的時候把 @ @ 中間的空白移除 )。


變數字串結合

如果今天我們要把變數使用字串的香加上,例如「名稱」或「網址」上頭,就要使用@{變數名},才會進行字串的相加,下面的例子我們建立了一個新的 class 名稱,還有統一網址的開頭。


@media

@media是在做 RWD 網頁必備的 CSS 技能,LESS 其實也有幫我們做了一些處理,如果我們@media是寫在巢狀結構裡面,轉出來的 CSS 會自動變成 and 的形式。