less基本語法

• 可以使用變量 在頂部進行對顏色的添加和定義,在標簽內(nèi)可以通過對顏色的調(diào)用來添加顏色,

@color:#ccc;

header{

color:@color;

}
h3{
color:@color;
}

* 如何在頁面中進行引用

    我們可以直接在客戶端使用less(less源文件), 只需要從<http://lesscss.org/>進行下載.
> <link rel = "styleesheet/less" type="text/css" herf = "styles.less">

    LESS源文件的引用方式與標準的css文件引入方式一樣

>  <Link res="stylesheet/less" type="text/css" href="fileName.less">

     rel的屬性要設(shè)置為"stylesheet/less" 還有更重要的一點 需要注意的就是你的樣式文件引用一定要在less(less.js)文件的引用之前,保證less源文件能夠正確的解析編譯.

* LESS文件 清單

  ```
@width: 100px;
#home {
  @width:300px;
  #div{
      width:@width;
  }
}
#leftDiv{
  width:@width;
}

@width相當與一個變量,當出現(xiàn)當前變量時,會在當前作用域中尋找當前變量.一直尋找到最高級的變量,如果沒有就會報錯. 

• Mixins

  Mixins其實是一種嵌套,它允許將一個嵌套入到另外一個類中使用,被嵌套的類可以當作變量,Mixins其實是規(guī)則級別的復(fù)用.
  

• 用less寫出來的結(jié)構(gòu)像是html的DOM樹的結(jié)構(gòu).

<div id="home">
<div id="top">top</div>
<div id="center">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>

以上是DOM樹的結(jié)構(gòu) - - -  以下是less的文件結(jié)構(gòu)  兩種結(jié)構(gòu)特別相似.能夠清晰的編寫和維護代碼.增加代碼的可讀性.

home{

color : blue;
width : 600px;
height : 500px;
border:outset;

top{

    border:outset; 
    width : 90%; 

}

center{

    border:outset; 
    height : 300px; 
    width : 90%; 
    #left{ 
      border:outset; 
      float : left; 

width : 40%;
}
#right{
border:outset;
float : left;
width : 40%;
}
}
}

___

* 還可以引入一個屬性集合

.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

       那么我們 就可以在其他的class中引入這個屬性集合了.像調(diào)用函數(shù)那樣去調(diào)用這個屬性集合

.post a {
color: red;
.bordered;
}

  這樣在**a**標簽中就可以調(diào)用.bordered這個屬性的所有的屬性.而.bordered就像是一個可以調(diào)用的函數(shù)一樣,擁有這兩個屬性了..