使用:
在客戶端使用
引入你的 .less 樣式文件的時候要設置 rel 屬性值為 “stylesheet/less”:
<link rel="stylesheet/less" type="text/css" href="styles.less">
然后點擊頁面頂部download按鈕下載 less.js, 在 中引入:
<script src="less.js" type="text/javascript"></script>
注意你的less樣式文件一定要在引入less.js前先引入。
備注：請在服務器環境下使用！本地直接打開可能會報錯！
基於node使用
$ npm install -g less@latest，
//編譯less
$ lessc all.less > all.css
在sublime上面使用
LESS 語法:
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!";