less學習筆記 27/8/17，less學習筆記

less學習筆記 27/8/17，less學習筆記

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)、嵌套規則、運算、函數、範圍等。

1、注釋

可以用css的/**/注釋，編譯成css檔案時，該注釋會被保留。

也可以用雙斜杠//注釋，編譯成css檔案時，該注釋不會被保留。

 

2、變數必須用@開始，推薦採用駝峰式命名。如：@變數名：值 /*======== 定義變數===========*/@color: #4d926f; /*======== 應用到元素中 ========*/ #header {    color: @color;}          h2 {    color: @color;} 註：在Less中的變數實際上就是一個“常量”，因為它們只能被定義一次。@arguments變數例：.border_arg(@w:30px, @c: red, @x: solid) {border: @arguments;} 3、混合（mixin）混合其實就是一種嵌套，它充許你將一個類嵌入到另一個類中，而被嵌入的這個類也稱為是一個變數。換句話說，你可以用一個類定義CSS，然後把整個為當作一個變數來使用，嵌入到另一人類中當作他的屬性；另外混合也像一個帶有參數的functions，如下在的例子： /*========= 定義一個類 ===========*/.roundedCorners(@radius:5px) {    -moz-border-radius: @radius;    -webkit-border-radius: @radius;    border-radius: @radius;}/*＝＝＝＝＝＝＝＝＝＝ 定義的類應用到另個一個類中 ＝＝＝＝＝＝＝＝＝＝＝*/＃header {    .roundedCorners();   //調用時，不帶參數混合，不用寫括弧}#footer {    .roundedCorners(10px);}混合有：不帶參數混合、帶參數混合、帶預設參數混合。 4、匹配模式相當於js當中的if(但不完全是)，它要滿足條件後才能匹配。 .pos(a) {position: absolute;}.pos(r) {position: relative;}.pos(f) {position: fixed;}.pos(@_) {width:200px;}使用時：.myDiv {.pos(r);} @_  是固定寫法，意思是以上不管哪個匹配到或者沒有匹配到，都要加上裡面的屬性。 5、運算less中，任何數字、顏色、變數都可以參與運算，運算應該被包裹在括弧中。 常見運算如：+  -  *  / 

例：
@w: 300px; .box {width:(@w + 20) * 10;   //運算中，只有一個帶單位就行color: #ccc - 20; //實際開發中不常用}
6、嵌套規則例：.list {width: 300px;li {height: 30px;}a {float: left;&: hover {color: red;}}}& 代表它的上一級選取器。 實際開發中，盡量少用多重嵌套，減少DOM查詢，可提高頁面載入效能 7、避免編譯需求：有時需要輸出一些不正確的css文法或less不認識的文法。 辦法：可以在字串前加一個波浪號+引號    ~‘ ’ 例：width: ~"calc(100% - 10)";