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

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

這篇並不是要描述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/) 第二種方法就是用NodeJS的方式安裝，我自己比較喜歡用gulp來實作，先npminstallgulp和gulp-less(安裝方法請參考Gulp學習1-安裝與執行)，gulpless的使用方式很簡單，只要requiregulpless，然後在pipe裡面使用，就可以進行轉換，後面再加上一個watch的task，幫助我們可以在存檔的當下就進行轉換動作。

gulp-less：https://www.npmjs.com/package/gulp-less vargulp=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需要熟練的地方。

LESS div{ span{ font-size:20px; b{ color:red; } } i{ font-size:12px; } } CSS divspan{ font-size:20px; } divspanb{ color:red; } divi{ font-size:12px; } ＆ &和SASS的用法差不多，就是可以直接繼承，如果像下面的例子，兩個&&則是會把一系列選擇器許出的標籤或樣式全部合併在一起。

LESS .a{ &:hover{ color:red; } } .p,.a,.ul,.li{ border-top:2pxdotted#366; &&{ border-top:0; } &+&{ border-top:0; } } CSS .a:hover{ color:red; } .p,.a,.ul,.li{ border-top:2pxdotted#366; } .p.p,.p.a,.p.ul,.p.li, .a.p,.a.a,.a.ul,.a.li, .ul.p,.ul.a,.ul.ul,.ul.li, .li.p,.li.a,.li.ul,.li.li{ border-top:0; } .p+.p,.p+.a,.p+.ul,.p+.li, .a+.p,.a+.a,.a+.ul,.a+.li, .ul+.p,.ul+.a,.ul+.ul,.ul+.li, .li+.p,.li+.a,.li+.ul,.li+.li{ border-top:0; } import LESS可以import別隻less的檔案，最後一起輸出成CSS，在下面的例子就是把tt.less這隻檔案引入使用。

LESS @import"tt.less"; CSS .tt{ color:#fff; } 變數 LESS的變數使用「@」開頭(SASS使用$開頭)，變數其實很方便，因為可以重複使用，可以將常用的變成變數的形式，可以省下很多時間。

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

(但在大括號外面的就影響不到了) LESS @color-red:red; .text-blue{ span{ color:@color-red; } @color-red:blue; color:@color-red; } .text-red{ color:@color-red; } CSS .text-blue{ color:blue; } .text-bluespan{ color:blue; } .text-red{ color:red; } 變數載入變數 會使用基本變數之後，變數也可以載入變數，看起來就像兩個@@一樣(因為markdown轉html把@@消失了，要使用的時候把@@中間的空白移除)。

LESS @aa:"111"; @bb:"222"; @var1:"aa"; @var2:"bb"; .div1::before{ content:@@var1;/*中間不用分開*/ } .div1::after{ content:@var1; } .div2::before{ content:@@var2;/*中間不用分開*/ } .div2::after{ content:@var2; } CSS .div1::before{ content:"111"; } .div1::after{ content:"aa"; } .div2::before{ content:"222"; } .div2::after{ content:"bb"; } 變數字串結合 如果今天我們要把變數使用字串的香加上，例如「名稱」或「網址」上頭，就要使用@{變數名}，才會進行字串的相加，下面的例子我們建立了一個新的class名稱，還有統一網址的開頭。

LESS @color-red:red; [email protected]{color-red}{ color:@color-red; } @url:"../"; div{ background-image:url("@{url}img/bg.png"); } CSS div.qq-red{ color:red; } div{ background-image:url("../img/bg.png"); } @media @media是在做RWD網頁必備的CSS技能，LESS其實也有幫我們做了一些處理，如果我們@media是寫在巢狀結構裡面，轉出來的CSS會自動變成and的形式。

LESS @mediascreen{ .selector{ color:blue; } @media(min-width:1023px){ .selector{ color:blue; } } } CSS @mediascreen{ .selector{ color:blue; } } @mediascreenand(min-width:1023px){ .selector{ color:blue; } } BackHome ArticleList ShareonFacebook ShareonGoogle+ ShareonTwitter BacktoTop 有興趣瞧瞧其他新文章嗎？ 前一篇文章： 下一篇文章： 您可以閱讀其他相關文章，或瀏覽所有文章 Copyright2019|AllRightsReserved.DesignedbyOXXO.STUDIO