LESS « 一種動態樣式語言 文檔鏈接：http://www.bootcss.com/p/lesscss/ 百科 Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變數、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製作主題、擴充。 Less 可以運行在 Node ...
LESS « 一種動態樣式語言
文檔鏈接：http://www.bootcss.com/p/lesscss/
百科
Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了諸如變數、混合（mixin）、函數等功能，讓 CSS 更易維護、方便製作主題、擴充。
Less 可以運行在 Node 或瀏覽器端。
疑問
Less是什麼呢？
Less是CSS的一門預處理語言。
其他一些CSS預處理語言諸如Sass、Stylus等。
什麼是預處理語言呢？
以前寫CSS是沒有變數的，使用Less的話就有了變數，所以可以乾一些奇妙的事情！還有其他一些方便的功能會在下麵講到。
Less和CSS在開發中是什麼關係呢？
在開發中，我們先使用Less的語法編寫代碼，再通過其他一些手段將.less文件轉成.css文件。
工具如Koala等。
知識鏈
1 變數
2 混合
2.1 帶參數混合
2.2 給參數設置預設值
2.3 不帶參數混合
2.4 @arguments變數
2.5 模式匹配
2.6 匹配多個參數
2.7 導引
2.7.1 導引序列使用逗號
2.7.2 導引參數
2.7.3 使用函數
2.7.4 and關鍵字
2.7.5 not關鍵字
3 嵌套
4 運算
5 Color函數
6 Math函數
7 命名空間
8 作用域
9 註釋
10 引入
11 字元串插值
12 避免編譯
13 JavaScript表達式
1 變數// .less文件（後面的代碼將省略說明） // 變數用@符號聲明 @nice-blue: #5b83ad; @light-blue: @nice-blue + #111; #header { color: @light-blue } // 將變數名定義為變數 @fnord: 'I am fnord.'; @var: 'fnord'; content: @@var; // less中的變數為完全的常量，所以只能定義一次 // .css文件（後面的代碼將省略css輸出） // 在css中輸出為 #header { color: #6c94be; } content: 'I am fnord.';
2 混合
// 定義一些通用的屬性集為一個class， // 然後在另一個class中去調用這些屬性 .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered; } .post a { color: red; .bordered; }
2.1 帶參數混合
.border-radious(@radious) { border-radius: @radious; -moz-border-radius: @radious; -webkit-border-radius: @radious; } #header { .border-radious(4px); } .button { .border-radious(6px); }
2.2 給參數設置預設值
.border-radious(@radious) { border-radius: @radious; -moz-border-radius: @radious; -webkit-border-radius: @radious; } #header { .border-radious(4px); } .button { .border-radious(6px); }
2.3 不帶參數混合
// 如果想隱藏屬性集合，不讓它暴露到CSS中去， // 但是還想在其他的屬性集合中引用 .wrap() { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; } pre { .wrap }
2.4 @arguments變數
// @arguments包含了所有傳遞進來的參數 // 如果不想單獨處理每一個參數的話 .box-shadow(@x:0, @y:0, @blur:1px, @color:#000) { box-shadow: @arguments; -moz-box-shadow: @arguments; -webkit-box-shadow: @arguments; }
2.5 模式匹配
// 根據傳入的參數來改變混合的預設呈現 // 讓.mixin根據不同的@switch值而表現各異 .mixin(dark, @color) { // 這裡前面沒有帶@所以可以作為標識 color: darken(@color, 10%); } .mixin(light, @color) { // 只接受light為首參 color: lighten(@color, 10%); } .mixin(@_, @color) { // 接受任意值 display: block; } // 使用 @switch: light; .class { .mixin(@switch, #888); } // 只有被匹配的混合才會被使用 // 變數可以匹配任意的傳入值， // 而變數以外的固定值就僅僅匹配與其相等的傳入值 // 在css中輸出為 .class { color: #a2a2a2; display: block; }
2.6 匹配多個參數
.mixin(@a) { color: @a; } .mixin(@a, @b) { color: fade(@a, @b); }
2.7 導引
// 當我們想根據表達式進行匹配，而非根據值和參數匹配 // 為了儘可能地保留CSS的可聲明性，less通過導引混合而非if/else語句來實現條件判斷 .mixin (@a) when (lightness(@a) >= 50%) { background-color: black; } .mixin (@a) when (lightness(@a) < 50%) { background-color: white; } .mixin (@a) { color: @a; } // 使用 .class1 { .mixin(#ddd) } .class2 { .mixin(#555) } // 導引中可用的全部比較運算有：>, >=, =, =<, <
2.7.1 導引序列使用逗號
// 導引序列使用逗號分割，當且僅當所有條件都符合時，才會被視為匹配成功。
.mixin (@a) when (@a > 10), (@a < -10) {}
2.7.2 導引參數
// 導引可以無參數，也可以對參數進行比較運算 @media: mobile; .mixin (@a) when (@media = mobile) {} .mixin (@a) when (@media = desktop) {} .max (@a, @b) when (@a > @b) { width: @a } .max (@a, @b) when (@a < @b) { width: @b }
2.7.3 使用函數
// 基於值的類型進行匹配，可以使用is函數 .mixin (@a, @b: 0) when (isnumber(@b)) {} .mixin (@a, @b: black) when (iscolor(@b)) {} // 常見的檢測函數 // iscolor // isnumber // isstring // iskeyword // isurl // 判斷一個值是純數字還是單位量 // ispixel // ispercentage // isem
2.7.4 and關鍵字
// 使用and關鍵字實現與條件
.mixin (@a) when (isnumber(@a)) and (@a > 0) {}
2.7.5 not關鍵字
// 使用not關鍵字實現或條件
.mixin (@b) when not (@b > 0) {}
3 嵌套
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none; } } }
4 運算
// 任何數字、顏色或者變數都可以參與運算
// less能夠分辨出顏色和單位
@var: 1px + 5;
// 使用括弧
width: (@var + 5) * 2;
// 在複合屬性中運算
border: (@width * 2) solid black;
5 Color函數
lighten(@color, 10%); // 輕 darken(@color, 10%); // 深 saturate(@color, 10%); // 飽和 desaturate(@color, 10%); // 稀釋 fadein(@color, 10%); // 漸顯 fadeout(@color, 10%); // 漸隱 fade(@color, 50%); // 透明 spin(@color, 10); // 大10度 spin(@color, -10); // 小10度 mix(@color1, @color2); // 組合 // 使用 @base: #f04615; .class { color: saturate(@base, 5%); background-color: lighten(spin(@base, 8), 25%); } // 提取顏色信息 hue(@color); // 色度 saturation(@color); // 飽和度 lightness(@color); // 亮度 // 在一種顏色的通道上創建另一種顏色 // @new 將會保持@old的色調, 但是具有不同的飽和度和亮度 // hsl函數同時使用上述3種函數 @new: hsl(hue(@old), 45%, 90%);
6 Math函數
ceil(2.4); // 向上
round(1.67); // 四捨五入
floor(2.6); // 向下
percentage(0.5); // 轉成百分比
7 命名空間
// 為了更好組織CSS或者單純是為了更好的封裝， // 將一些變數或者混合模塊打包起來， // 定義一些屬性集之後可以重覆使用 #bundle { .button() { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white; } } .tab {} .citation {} } // 在#header a中引入.button #header a { color: orange; #bundle > .button; }
8 作用域
// 首先會從本地查找變數或者混合模塊， // 如果沒找到的話會去父級作用域中查找，直到找到為止 @var: red; #page { @var: white; #header { color: @var; // white } } #footer { color: @var; // red }
9 註釋
/* Hello, I'm a CSS-style comment */ .class { color: black } // less同樣也支持雙斜線的註釋, 但是編譯成 CSS 的時候自動過濾掉: // Hi, I'm a silent comment, I won't show up in your CSS .class { color: white }
10 引入
// 在main文件中引入.less文件,.less尾碼可帶可不帶
@import "lib.less";
@import "lib";
// 導入一個CSS文件而且不想less對它進行處理，只需要使用.css尾碼就可以
@import "lib.css";
11 字元串插值
// 變數可以使用@{name}這樣的結構嵌入到字元串中 @base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png");
12 避免編譯
// 如果需要輸出一些不正確的CSS語法 // 或者使用一些less不認識的專有語法 // 要輸出這樣的值可以在字元串前加上一個~ .class { filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()"; }
13 JavaScript表達式
// 通過反引號的方式使用 @var: `"hello".toUpperCase() + '!'`; // 可以同時使用字元串插值和避免編譯 @str: "hello"; @var: ~`"@{str}".toUpperCase() + '!'`; // 可以訪問JavaScript環境 @height: `document.body.clientHeight`; // 將一個JavaScript字元串解析成16進位的顏色值 @color: color(`window.colors.baseColor`); @darkcolor: darken(@color, 10%);
使用
less的使用有多種方法，最終都是通過編譯工具編譯成.css文件。
先用你的編輯器新建一個.less文件，再用Less的語法編寫你的代碼，就如
再用編譯工具將你的.less文件編譯成.css文件。
這裡我用的編譯工具是 Koala ，
下載地址：http://koala-app.com/index-zh.html
它的界面是這樣子的
直接將你包含.less文件的文件夾拖拽進去就行了。
點擊文件，執行編譯，最後將會在你的桌面上生成.css文件。
最後生成的.css文件
