less學習筆記 27/8/17

less最新官網

http://less.bootcss.com/

 

Less 是一種動態的樣式語言。Less擴展了CSS的動態行爲，好比說，設置變量（Variables）、混合書寫模式（mixins）、操做（operations）和功能（functions）等等，最棒的是，Less使用了現有的CSS語法，也就是說，你能夠直接把你現成的樣式文件「style.css」直接改爲「style.less」，他也能正常工做。如：

<link rel="stylesheet/less" href="less/style.less" />

Less如今能夠在客戶端（如：IE+,Webkit,Firefox）和服務器（如node.js）上運行。前面也說過Less是CSS的一種擴展，他不但向後兼容，並且在現有的CSS語法基礎上增長許多額外的功能。

LESS的基礎語法基本上分爲如下幾個方面：變量、混合(Mixins)、嵌套規則、運算、函數、做用域等。

一、註釋

能夠用css的/**/註釋，編譯成css文件時，該註釋會被保留。

也能夠用雙斜槓//註釋，編譯成css文件時，該註釋不會被保留。

 

二、變量

必須用@開始，推薦採用駝峯式命名。如：@變量名：值

 

/*======== 定義變量===========*/

@color: #4d926f;

 

/*======== 應用到元素中 ========*/ 

#header {    color: @color;}          h2 {    color: @color;}

 

注：在Less中的變量實際上就是一個「常量」，由於它們只能被定義一次。

@arguments變量

例：

.border_arg(@w:30px, @c: red, @x: solid) {

border: @arguments;

}

 

三、混合（mixin）

混合其實就是一種嵌套，它充許你將一個類嵌入到另外一個類中，而被嵌入的這個類也稱爲是一個變量。換句話說，你能夠用一個類定義CSS，而後把整個爲看成一個變量來使用，嵌入到另外一人類中看成他的屬性；另外混合也像一個帶有參數的functions，以下在的例子：

 

/*========= 定義一個類 ===========*/

.roundedCorners(@radius:5px) {   

 -moz-border-radius: @radius;   

 -webkit-border-radius: @radius;   

 border-radius: @radius;

}

/*＝＝＝＝＝＝＝＝＝＝ 定義的類應用到另個一個類中 ＝＝＝＝＝＝＝＝＝＝＝*/

＃header {    

.roundedCorners();   //調用時，不帶參數混合，不用寫括號

}

#footer {    

.roundedCorners(10px);

}

混合有：不帶參數混合、帶參數混合、帶默認參數混合。

 

四、匹配模式

至關於js當中的if(但不徹底是)，它要知足條件後才能匹配。

 

.pos(a) {

position: absolute;

}

.pos(r) {

position: relative;

}

.pos(f) {

position: fixed;

}

.pos(@_) {

width:200px;

}

使用時：

.myDiv {

.pos(r);

}

 

@_  是固定寫法，意思是以上無論哪一個匹配到或者沒有匹配到，都要加上裏面的屬性。

 

五、運算

less中，任何數字、顏色、變量均可以參與運算，運算應該被包裹在括號中。 常見運算如：+  -  *  / 

例：
@w: 300px;

 

.box {

width:(@w + 20) * 10;   //運算中，只有一個帶單位就行

color: #ccc - 20; //實際開發中不經常使用

}

六、嵌套規則

例：

.list {

width: 300px;

li {

height: 30px;

}

a {

float: left;

&: hover {

color: red;

}

}

}

& 表明它的上一級選擇器。

 

實際開發中，儘可能少用多重嵌套，減小DOM查詢，可提升頁面加載性能

 

七、避免編譯

需求：有時須要輸出一些不正確的css語法或less不認識的語法。

 

辦法：能夠在字符串前加一個波浪號+引號    ~‘ ’

 

例：

width: ~"calc(100% - 10)";