Less的引用

引入Less

語法：
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

說明：
less.js文件必須在引入的less文件之後
引入less文件事rel的值必須爲 stylesheet/less

變量

1. 變量聲明

@變量名:變量值；

例1：@widht:100px;
例2：@length：100px；@lenght : @width+100px(+,-,*,/ 都可以)

2. 變量的使用

將變量名寫在css屬性後面即可

例：
@width:100px;
div{
    width:@widht;
}

3. 變量的值參與計算

變量可以直接與 加，減，乘，除運算

例：
@width:100px
@width+100px ;結果爲200px
@width*2; 結果爲200px

4. 作用域（scope）

作用域是程序中的一個標準，LESS中也是。

• 定義在root級的變量（全局變量），在整個文檔中都是有效。
• 定義在選擇器，比如id或者class中的變量（局部變量），只在該選擇器中有效；

• 如果局部變量和全局變量名稱相同時，則局部變量優先級高，將替代全局變量。

  ---

  @color: #00c; /* 藍色 */
  . header {
  @color: #c00; /* 紅色 */
  border: 1px solid @color; /* 紅色邊框 */
  }
  .footer {
  border: 1px solid @color; /藍色邊框 /
  }

類（函數）

1. 類的聲明

通過 “.” +類名（參數列表）{css申明}

說明：

“.”不能少必須加

類名和css類名命名規則相同參數列表和變量聲明一樣，可帶默認值

css申明可以用參數也可用常量值

例：
.myClass(@color:red,@length){
    background-color:@color
    width:@length;
    height:@length;
    border：1px solid @color
}

2. 類的應用（函數的調用）

直接在css聲明中調用類名並傳入參數即可

說明：

“.”不能少

如果參數沒有默認值則必須傳入參數，如果都有默認值則可以不傳入參數，直接寫類名即可

例：
.myClass(@color:red ,@length:100px){
    background-color:@color;
    width:@length;
    height:@length;
    border：1px solid @color
}
.div1{
    .myClass(grenn,200px);
}
.div1{
    .myClass;
}

類聲明的擴展

1. 以使用@arguments來引用所有傳入的變量

例：
.border(@a,@b,@color:blue){

    border:@arguments;

}

2. 相同類名的標識

使用參數的控制位來控制相同的類輸出不同的樣式

.border(cool,@color){
  border:2px solid @color;
}
.border(hot,@color){
  border:1px solid @color   
}   
.border(@_,@ye){
  color:@ye;
}

調用： 
.con2{.border(hot,red)} 
.con1{.border(cool,blue)}

輸出爲：
.con2(border:1px solid red;color:red)   
.con1{border:2px solid blue;color:blue}

3. 使用參數個數來控制輸出那個類：

.border(@a){….}

.border(@a,@b){...}

如果傳入一個參數則調用第一個定義，傳入2個則調用第二個定義

4. 條件語句判斷：

可以在類函數定義時候使用條件判斷

.border(@a) when (@a>10),(@a<3){    
  border:@a solid blue;
}
.con1{.border(5px)} 
這裏的條件是大於10或者小於3，所以調用不成立

.border(@a) when (@a>10) and (@a<15){   
  border:@a solid blue;
}
.con1{.border(12px)}
這裏的條件是大於10並且小於15 ，調用成立，條件語句中那個px可以加也可以不加，判斷都通過

5. 以使用內置函數unit來增加或者取出單位

.border(@a) {
  border:unit(@a,px) solid red;
}

調用： 
 .con2{.border(5)}
輸出：
.con2{border:5px solid red;},如果寫成unit(5px) 則去掉單位輸出5

混合（Mixin）

有時，我們會創建一些樣式，目的是在樣式中重複使用這些樣式規則。沒有人會阻止你在一個HTML中使用多少個class，但是你可以使用LESS，在樣式表中完成。爲了說明這一點，我粘貼了一些代碼示例： .border { border-top: 1px dotted #333; }

article.post {
  background: #eee;
  .border;
}

ul.menu {
  background: #ccc;
  .border;
}

選擇器繼承

下面這些是LESS中沒有提供的。通過這個功能，你可以將一個選擇器附加到已經預先定義的選擇器上，而無需再使用逗號將兩者分開的寫法了：

.menu {
  border: 1px solid #ddd;
}
.footer {
  @extend .menu;
}
/* 上面的規則和下面的規則是一樣的效果 */
.menu, .footer {
  border: 1px solid #ddd;
}

嵌套規則(Nested Rules)

在CSS中嵌class和id是避免樣式干擾或者被別的樣式干擾的唯一方式。但是可能變得很亂。使用一個選擇器，類似於”#site-body .post .post-header h2”是毫無用處，而且還佔用大量沒必要的空間。使用LESS,你可以嵌套ID、class以及元素標籤。對於前面提到的例子，你可以這樣寫：

#site-body { …
  .post { …
    .post-header { …
      h2 { … }
      a { …
        &:visited { … }
        &:hover { … }
      }
    }
  }
}
上面的代碼最終效果和上面的一大串選擇器效果一樣，但是要更容易閱讀和理解的多，而且它佔用很少的空間。你也可以通過&來引用元素樣式到他們的僞元素上，這個功能類似於javascript中的this。

命名空間（Namespaces）

命名空間可以用於組織我們的CSS，從而提高到另一個層次，我們將一些公用的樣式創建分組，然後在使用的時候直接調用。例如，如果我們創建了一個名爲“default”的樣式分組，我們就可以在使用到的時候直接從該組中調用。

#defaults {
  .nav_list () {
    list-style: none;
    margin: 0; padding: 0;
   }
   .button () { … }
   .quote () { … }
}
然後，在我們的代碼中，如果我們正好在一個nav元素中使用了ul元素，我們就會想到我們需要default樣式。那麼我們就可以簡單的調用它，它也會被直接應用。

nav ul {
  #defaults > .nav_list;
}

註解

這一部分比較基礎。LESS中允許兩種註釋寫法。標準的CSS註釋，/* comment */，是有效的，而且能夠通過處理並正確輸出。當行註釋，// comment，同樣可以用但是不能夠通過處理也不能被輸出，然後，結果是，“無聲的”。

導入 在less文件中導入外部less/css文件

導入也相當符合標準。標準的 @import ‘classes.less’; 處理的很好。然而，如果你想要導入其它的LESS文件，那麼文件的擴展名是可選的，所以 @import ‘classes’; 也是可行的。如果你想要導入一些無需LESS處理的內容，你可以使用 .css 擴展 (比如， @import ‘reset.css’;)。

字符串插入

字符串也是可以用於變量中的，然後通過@{name}來調用。

@base_url = 'http://coding.smashingmagazine.com';
background-image: url("@{base_url}/images/background.png");