動態CSS--less - xiaominwu－IT工程師數位筆記本

文章出處

忙了很久終于有時間來寫點東西了，不知道大家有沒有發現，我們在寫CSS的時候總是在重復很多代碼，一個相同的屬性值往往要重復N次，以前我就經常想有沒有什么辦法能讓我們不用一直重復的font-size啊color啊，直到有了LESS的出現，原來CSS還真的可以這么寫的。

在寫LESS的時候，我們會用到一些我們以前寫CSS時沒有用到的概念，比如混合（繼承），變量，嵌套，運算，函數。

less文件瀏覽器是解析不到的，所以我們實際用它的時候要編譯讓它變成瀏覽器所認識的CSS，后期維護的時候我們也只是修改less文件然后編譯成CSS替換原來的就可以了。less是我們寫CSS的一個工具，它不能代替也不能取代CSS，它只是在CSS的基礎上更加了動態的特性。less比較適合用在重用性較大的網站，但是很多程序都喜歡它的書寫方式。

編譯less的方式只要引入了相關的JS腳本（less.js , node.js）那么它就可以在客戶端，服務器端中編譯，我這里用的是第三種方式：在開發的時候就把less編譯成CSS然后直接引入項目中，下面我們來介紹下即時編譯less的工具。

首先：介紹下編寫和編譯less用到的工具，先到官網上下載我們的less編譯器 koala。下載以后安裝，打開軟件點擊設置選擇中文，關閉打開菜單就是中文的了。

二：打開編輯器，我這里用的是sublime_text3，因為sublime_text2寫less的時候總是沒有反應的，裝了sublime_text 3然后安裝下less插件。現在我們新建一個文件保存為less后綴名。注意，等下我們編譯less的時候CSS文件會放在這個less的同級目錄下。

編輯器右下角是less。

然后打開我們的koala軟件，把剛建好保存的less文件直接拖進去

然后返回到我們的編輯器去寫less。

在koala軟件中點擊less文件右側出現菜單，

有個“執行編譯按”鈕，點擊它然后打開我們之前放置less的地方就看到編譯后的CSS文件，就算這里我們不點“執行編譯”的按鈕，在我們把less拖進去然后在編輯器中寫less并保存它是自動編譯成CSS的，當書寫有錯誤的時候也會即時的提示。這里想說下的是“輸出方式”，有兩種選擇，一種是“normal（正常）”方式，編譯后的CSS文件不壓縮；"compress（壓縮"）方式，編譯后的CSS文件會壓縮--多余的空格刪掉并不換。這的選擇看個人喜好。建議是選擇compress方式，因為我們以后維護直接改less然后編譯CSS直接放項目中使用。

三：我們現在開始寫less吧

變量：可以讓我們在一個地方統一管理這些值，讓代碼更好的維護。

變量的申明要@字符開頭：

如（為了代碼更容易看，我下面的輸出方式選擇normal。）

.less

@color:red; 申明一個顏色是紅色的變量，變量名+屬性值，申明變量的末尾一定要加上“；”結束。
body{background: @color} 引用變量

編譯后.css

body{background:#f00}

.less

@color:red;
.border{color: @color;border: 1px solid @color} 可以多個地方同時引用同一個變量

編譯后.css

.border{color:#f00;border:1px solid #f00}

也可以把一個變量作為另一個變量的名字

.less

@color:red;
@color2:@color;
body{background: @color2 }

編譯后.css

body {
background: #ff0000;
}

重復申明同名變量后面申明會覆蓋前面變量申明，所以申明的變量只能申明一次。

.less

@color:red;
@color2:@color;
@color2:blue;
body{background: @color2 }

編譯后.css

body {
background: #0000ff; 結果是藍色
}

上面的例子我們也只是把變量用在了CSS屬性值中，變量還可以用在其他的地方，如選擇器的名稱，屬性名稱，URL地址。

變量用作選擇器的名稱：

.less

@selectname: .box; 聲明一個名為selectname的變量，它指代的是“.box”這個類。
@{selectname}{ 注意這里引用的時候“@”字符要放在外面并且變量名字放在“{}”花括號里面。
background: #000;
width: 100px;
height: 100px;
}

編譯后.css

.box {
background: #000;
width: 100px;
height: 100px;
}

變量用作選屬性的地址；

.less

@property:font-size; 定義的時候不能屬性值和變量值同時存在，只能其一，@size:font-size:18px;
body{ @size }這樣的用法是不允許的。
body{
@{property}:100px;注意這里引用的時候“@”字符要放在外面并且變量名字放在“{}”花括號里面。
}

編譯后.css

body {
font-size: 100px;
}

變量用作選URL的地址；

.less

@imgurl: "../images/01.jpg"; 可以直達到它的任意級目錄如@imgurl: "../images"; 引用的時候background: url(@imgurl/01.jpg)
body{
background: url(@imgurl)
}

編譯后.css

body {
background: url("../images/01.jpg");
}

變量不一定要先定義才能用，也可以先用了再定義，因為變量都是延時載入的。

下面兩段代碼是等價的

.less1

@color:red;
@color2:@color;
body{background: @color2 }

.less2

body{background: @color2 }
@color:red;
@color2:@color;

編譯后.css一致

body {
background: #ff0000;
}

我們前面說過，當聲明同一個變量多次的時候，應用的時候就只會用到最后一次聲明的變量。less在找變量的時候都是先從當前的作用域選擇當沒有找到的時候就繼續往上祖先元素中尋找。這個有點像我們腳本的局部變量和全局變量，有局部就用局部沒有就去全局。

.less

@size:14px;
body{
@size:16px;
font-size: @size; 會選擇離它最近的變量
}

編譯后.css

body {
font-size: 16px;
}

定義變量的位置時候在引用前后是沒有關系的，只要是當前的，它都會優先考慮。

.less

@size:14px;
body{
font-size: @size;
@size:16px;
}

編譯后.css

body {
font-size: 16px;
}

這種優先級也適用于混合

.less

.css{background: red}
.css{background: blue}
body{
.css;
.css{background: yellow}
}

編譯后.css

.css {
background: #ff0000;
}
.css {
background: #0000ff;
}
body {
background: #ffff00; 結果為黃色
}
body .css {
background: #ffff00;
}

為啥這里多了一些不想代碼？那是因為沒有帶括號的混合都會相應的多出一條以這個混合名字為名的類（或者ID）。

注意：后面的同名變量會覆蓋（重寫）前面的同名變量，那么所有應用這個變量的地方都會被重寫。

.less

@basesize: 16px;
@size: @basesize*10;
@basesize: 12px;
body{
font-size: @size;
.box{
font-size: @basesize;
}
}

編譯后.css

body {
font-size: 120px;
}
body .box {
font-size: 12px;
}

混合：把classA混合到classB，那么classB就擁有了classA中聲明的所有樣式。

這個有點像程序中的繼承，classB繼承了classA的樣式，classA是父親，classB是兒子。

混合也像函數，帶參數：引用時據傳入不同的參數值來改變里面的屬性值帶默認值，引用時有值作為參數傳入那么里面的屬性值用新值，引用時沒有值作為參數傳入那么就用默認值；或者不帶參數。

在less中運用混合，一般是把一些通用的樣式聲明為混合，然后在其他地方引用這個混合。

不帶參數的混合

.less

.css(){ 混合名字的前面要帶“.”或者“#”都是可以，分別是類選擇器和ID選擇器。
background: yellow;
border: 5px solid #000;
}
body{
.css(); 引用的時候可以帶括號也可以不帶括號，建議都帶上。
}

編譯后.css

body{background:#ff0;border:5px solid #000}、

這里要說明下的是

聲明混合的時候不帶括號的情況

.less

.css{ 不帶括號的聲明
background: yellow;
border: 5px solid #000;
}
body{
.css(); 引用的時候帶不帶括號結果一樣
}

編譯后.css

.css {
background: yellow;
border: 5px solid #000;
}
body {
background: yellow;
border: 5px solid #000;
}

會發現body同樣擁有了混合名字為.css的所有樣式，唯一不同的是多了一個以混合名字為名的類，當混合名字為符號”#“的時候就做了一個以混合名字為名的ID。

#css { 以混合名字為名的ID。
background: yellow;
border: 5px solid #000;
}
body {
background: yellow;
border: 5px solid #000;
}

當我們想用混合里的屬性但又不想多出一個樣式，帶上括號。

帶參數不帶默認值的混合

.less

.css(@color){ 聲明混合時候給一個名為color的變量作為參數
background: @color 里面的用參數作為它的屬性值
}
body{
.css(red) 引用的時候傳入個新值作為混合.css()的參數，因為是不帶默認值并且是需要參數的混合，引用時不傳入參數就會報錯。
}

編譯后.css

body {
background: #ff0000;
}

帶參數帶默認值的混合

.less

.css(@color:blue){ 在參數的后面帶上字符“：”并且在后面給上默認值。當引用的時候沒有給混合傳入參數的情況下就會用這里的默認值作為它里面的屬性值

background: @color
}
body{
.css() 應用的時候可以給值或參數不給參數，有參數即用新值，沒有則用默認值
}

編譯后.css

body {
background: #0000ff;
}

帶多個參數的時候用“，”或者用“；”分開，建議用“；”

.less

.css(@color:blue;@color2:red;){ 注意了多個參數的時候變量的“；”要改為“，”，最后一個參數可以不給。
background: @color;
border:10px solid @color2;
}
body{
.css(blue)
}

編譯后.css

body {
background: #0000ff;
border: 10px solid #ff0000;
}

@arguments

當有很多個參數的時候，我們引用的時候又不想一個一個參數寫這樣我們就可以用@arguments這個變量代替所有的參數

.less

.css(@border:10px,@color:red,@type:solid,){
border: @arguments; 把所有的參數包含進來，給新值的時候要注意按照聲明參數時的順序
}
body{
.css
}

編譯后.css

body {
border: 10px #ff0000 solid; 用的是混合的默認值
}

命名空間：

有的時候我們想把一些樣式分成單獨的一個模塊，其他地方不能使用，也防止了和其他地方的樣式有沖突。

.less

#outwarp{ 最外層括號可加可不加，同名ID都不會出現在編譯的CSS文件中，但是里面的不加括號就會出現。
.inner1(){
font-size: 10px;

}
.inner2(){
font-size: 20px;
&:hover{
font-size: 202px;
}
.inner3(){
font-size: 30px;
.inner4(){
font-size: 40px;
}
}

}
}
body{
#outwarp .inner1();
.box1{
#outwarp .inner2(); 應用的上級不能給括號
.box3{
#outwarp .inner2.inner3 .inner4();應用的時候必須一級級的把祖先寫在前面并且都不能加括號

}
}
.box2{
#outwarp .inner2 .inner3();
}
}

編譯后.css

body {
font-size: 10px;
}
body .box1 {
font-size: 20px;
}
body .box1:hover {
font-size: 202px;
}
body .box1 .box3 {
font-size: 40px;
}
body .box2 {
font-size: 30px;
}

!impotant關鍵字

.less

.css(){
background: #000;
font-size: 12px;
}
body{
.css() !important; 在應用的時候加上!important關鍵字，那么混合里面的每條規則都會添加上!important;
}

編譯后.css

body {
background: #000 !important;
font-size: 12px !important;
}

也可以在寫混合的時候單獨給一條規則加上!important;

.less

.css(){
background: #000 !important;
font-size: 12px;
}
body{
.css()
}

編譯后.css

body {
background: #000 !important;
font-size: 12px;
}

嵌套：這個就有點像我們平常寫CSS的后代選擇器，用less就會使它更具有模塊化維護的時候也很清晰，因為它是和HTML的結構一樣。

.less

body{
background: #000;
.border{background: red;width: 100px;height: 100px} HTML的body建一個類為.border的div。
}

編譯后.css

body {
background: #000;
}
body .border {
background: red;
width: 100px;
height: 100px;
}

&符號用來代替當前元素的父元素

.less

@color1:red;
@color2:yellow;
body{
.border{
background: @color1;
width: 100px;
height: 100px;
&:hover{ 這里的&符號代替的是類border
background: @color2;
}
}
}

編譯后.css

body .border {
background: #ff0000;
width: 100px;
height: 100px;
}
body .border:hover {
background: #ffff00;
}

模式匹配 有的時候我們想寫好幾條混合，然后后面引用的時候根據傳入的參數個數和參數值來確定用哪個混合規則。這個有點像Java里面的方法重載overLoad（一個類中可以定義有相同的名字，但參數（個數，類型）不同的多個方法。調用時，會根據不同的參數選擇對應的方法，只要這些方法在調用的時候編譯器能區分開來不會造成混淆，就構成重載）

根據傳入參數個數匹配混合

.less

.mixin(@color){ 匹配一個參數
background: @color;
}
.mixin(@color,@color2){ 匹配兩個參數
color: @color ;
background: @color2;
width: 100px;
height: 100px;
}
body{
.mixin(red) 一個參數匹配第一條.mixin
}
.border{
.mixin(yellow,blue) 匹配第二條.mixin
}