用LESS 寫CSS ( 入門、Import、變數)
文章推薦指數： 80 %
用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/)
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
延伸文章資訊
- 1LESS CSS - Beginner's Guide - Hongkiat
Unlike regular CSS as we know it, LESS works much more like a programming language. It's dynamic,...
- 2CSS 預處理器SASS、LESS 介紹 - 歐斯瑞
什麼是CSS 預處理器（CSS preprocessor）？ · SASS（SCSS） · LESS · Stylus · Turbine · Switch CSS · CSS Cacheer ...
- 3CSS 的變種： LESS 與SASS
LESS 是由Alexis Sellier 所設計的工具，原本是用Ruby 實作，用來將LESS 語法轉換成CSS 語言。後來改用JavaScript 設計後，就能內嵌到瀏覽器中，動態的將LES...
- 4[JavaScript] [CSS] LESS.js 介紹 - iT 邦幫忙
¨LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS...
- 5用LESS 寫CSS ( 入門、Import、變數)
用LESS 寫CSS ( 入門、Import、變數). 猶記部落格創立之初，是用SASS 這個基於Ruby on rails 的CSS 預處理器來撰寫CSS ( 不過個人寫程式喜好還是傾向SCS...
