使用LESS對CSS進行預處理
LESS 做為 CSS 的一種形式的擴展，它並沒有閹割 CSS 的功能，而是在現有的 CSS 語法上，添加了很多額外的功能，所以學習 LESS 是一件輕而易舉的事情。
變量
請註意 LESS 中的變量為完全的 ‘常量’ ，所以只能定義一次。
// Less @nice-blue: #5B83AD; #header { color: @nice-blue; } // 輸出 #header { color: #5083ad; }
** 甚至可以用變量名定義為變量: **
// Less @fnord: "I am fnord."; @var: ‘fnord‘; #header:after{content: @@var;} //輸出 #header:after { content: "I am fnord."; }
混合
在 LESS 中我們可以定義一些通用的屬性集為一個class，然後在另一個class中去調用這些屬性。那如果我們現在需要在其他class中引入那些通用的屬性集，那麽我們只需要在任何class中像下面這樣調用就可以了:
// Less .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered; } // 輸出 .bordered{ border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; }
帶參數混合
在 LESS 中，你還可以像函數一樣定義一個帶參數的屬性集合:
.border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } #header{ .border-radius(6px) } // 輸出 #header { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
** 我們還可以像這樣給參數設置默認值:**
.border-radius (@radius:5px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } #header{ .border-radius; } // 輸出 #header { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
** 你也可以定義不帶參數屬性集合,如果你想隱藏這個屬性集合，不讓它暴露到CSS中去，但是你還想在其他的屬性集合中引用，你會發現這個方法非常的好用:**
// Less .wrap () { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; } pre { .wrap } // 輸出 pre { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; }
** @arguments 變量**
@arguments包含了所有傳遞進來的參數. 如果你不想單獨處理每一個參數的話就可以像這樣寫:
// Less .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; } #head{ .box-shadow(2px, 5px); } // 輸出 #head { box-shadow: 2px 5px 1px #000000; -moz-box-shadow: 2px 5px 1px #000000; -webkit-box-shadow: 2px 5px 1px #000000; }
嵌套規則
LESS 可以讓我們以嵌套的方式編寫層疊樣式. 讓我們先看下下面這段 CSS:
** 註意 & 符號的使用—如果你想寫串聯選擇器，** 而不是寫後代選擇器，就可以用到&了. 這點對偽類尤其有用如 :hover 和 :focus.
// Less #header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } } } //輸出 #header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; } #header .logo:hover { text-decoration: none; }
運算
任何數字、顏色或者變量都可以參與運算。
// Less @base: 5%; @filler: @base * 2; #head{ color: #888 / 4; height: 100% / 2 + @filler; } // 輸出 #head { color: #222222; height: 60%; }
Math 函數
LESS提供了一組方便的數學函數，你可以使用它們處理一些數字類型的值：
// Less
round(1.67); // returns `2`
ceil(2.4); // returns `3`
floor(2.6); // returns `2`
percentage(0.5); // returns `50%`
命名空間
有時候，你可能為了更好組織CSS或者單純是為了更好的封裝，將一些變量或者混合模塊打包起來, 你可以像下面這樣在#bundle中定義一些屬性集之後可以重復使用：
// Less 【你只需要在 #header a中像這樣引入 .button:】 #bundle { .button () { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab () { //不調用，不輸出 color: #fff; } } #header a { color: orange; #bundle > .button; } // 輸出 #header a { color: orange; display: block; border: 1px solid black; background-color: grey; } #header a:hover { background-color: #ffffff; }
作用域
LESS 中的作用域跟其他編程語言非常類似，首先會從本地查找變量或者混合模塊，如果沒找到的話會去父級作用域中查找，直到找到為止。
// Less @var: red; #page { @var: white; #header { color: @var; // white } } #footer { color: @var; // red } // 輸出 #page #header { color: #ffffff; } #footer { color: #ff0000; }#page #header { color: #ffffff; } #footer { color: #ff0000; }
註釋
CSS 形式的註釋在 LESS 中是依然保留的:
/* 多行註釋 Hello, I‘m a CSS-style comment Hello, I‘m a CSS-style comment */ // 單行註釋
Importing
你可以在main文件中通過下面的形勢引入 .less 文件, .less 後綴可帶可不帶:
@import "lib.less";
@import "lib";
// 如果你想導入一個CSS文件而且不想LESS對它進行處理，只需要使用.css後綴就可以:
@import "lib.css";
字符串插值
變量可以用類似ruby和php的方式嵌入到字符串中，像@{name}這樣的結構
@base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png");
避免編譯
有時候我們需要輸出一些不正確的CSS語法或者使用一些 LESS不認識的專有語法。要輸出這樣的值我們可以在字符串前加上一個 ~, 例如:
// Less .class { filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; } //輸出 .class { filter: ms:alwaysHasItsOwnSyntax.For.Stuff(); }
JavaScript 表達式
JavaScript 表達式也可以在.less 文件中使用. 可以通過反引號的方式使用:
@var: `"hello".toUpperCase() + ‘!‘`;
// 輸出
@var: "HELLO!";
參考：https://www.cnblogs.com/yldf55/p/5812438.html
使用LESS對CSS進行預處理