LESS速查

註釋

緩存式註釋/*註釋內容*/ 
非緩存式註釋//註釋內容

 

變量

@nice-blue: #5B83AD;

@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

 

混合

1.混合類：

.bordered {

border-top: dotted 1px black;

border-bottom: solid 2px black;

}

#menu a {

color: #111;

.bordered;

2.混合帶參數：

.border-radius (@radius) {

border-radius: @radius;

-moz-border-radius: @radius;

-webkit-border-radius: @radius;

}}

 

#header {

.border-radius(4px);

}

咱們還能夠像這樣給參數設置默認值：

.border-radius (@radius: 5px) {

border-radius: @radius;

-moz-border-radius: @radius;

-webkit-border-radius: @radius;

}

#header {

.border-radius;

}

 

模式匹配

LESS 提供了經過參數值控制 mixin 行爲的功能，讓咱們先從最簡單的例子開始：

.mixin (@s, @color) { ... }

.class {

.mixin(@switch, #888);

}

若是要根據 @switch 的值控制 .mixin 行爲，只需按照下面的方法定義 .mixin：

 

.mixin (dark, @color) {

color: darken(@color, 10%);

}

.mixin (light, @color) {

color: lighten(@color, 10%);

}

.mixin (@_, @color) {

display: block;

}

而後調用：

@switch: light;

 

.class {

.mixin(@switch, #888);

}

將會獲得如下 CSS：

 

.class {

color: #a2a2a2;

display: block;

}

傳給 .mixin 的顏色將執行 lighten 函數，若是 @switch 的值是 dark，那麼則會執行 darken 函數輸出顏色。

 

運算：

@test:800px;

body{

width:@test - 200; //運算會自動同步單位

}

 

嵌套規則

LESS 能夠讓咱們以嵌套的方式編寫層疊樣式

#header {

color: black;

 

.navigation {

font-size: 12px;

}

.logo {

width: 300px;

&:hover { text-decoration: none }

}

}

注意 & 符號的使用 — 若是你想寫串聯選擇器，而不是寫後代選擇器，就能夠用到 & 了。這點對僞類尤爲有用如 :hover 和 :focus。

例如：

.bordered {

&.float {

float: left;

}

.top {

margin: 5px;

}

}

會輸出：

 

.bordered.float {

float: left;

}

.bordered .top {

margin: 5px;

}

 

@arguments 變量

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {

box-shadow: @arguments;

-moz-box-shadow: @arguments;

-webkit-box-shadow: @arguments;

}

.box-shadow(2px, 5px);

將會輸出：

box-shadow: 2px 5px 1px #000;

-moz-box-shadow: 2px 5px 1px #000;

-webkit-box-shadow: 2px 5px 1px #000;

 

避免編譯

~"樣式" 可用單引號或雙引號

有時候咱們須要輸出一些不正確的 CSS 語法或者使用一些 LESS 不認識的專有語法。

 

要輸出這樣的值咱們能夠在字符串前加上一個 ~，例如：

.class {

filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";

}

這叫做「避免編譯」，輸出結果爲：

 

.class {

filter: ms:alwaysHasItsOwnSyntax.For.Stuff();

}

 

做用域

LESS 中的做用域跟其餘編程語言很是相似，首先會從本地查找變量或者混合模塊，若是沒找到的話會去父級做用域中查找，直到找到爲止。

@var: red;

#page {

@var: white;

#header {

color: @var; // white

}

}

#footer {

color: @var; // red

}

 

!important關鍵字

 

調用時在混合後面加上!important關鍵字表示將混合帶來的全部屬性標記爲!important：

 

.mixin (@a: 0) {

border: @a;

boxer: @a;

}

.unimportant {

.mixin(1);

}

.important {

.mixin(2) !important;

}

編譯成：

 

.unimportant {

border: 1;

boxer: 1;

}

.important {

border: 2 !important;

boxer: 2 !important;

}