less基本語法
-
可以使用變量 在頂部進行對顏色的添加和定義,在標簽內可以通過對顏色的調用來添加顏色,
@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的屬性要設置為"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ī)則級別的復用. -
用less寫出來的結構像是html的DOM樹的結構.
<div id="home">
<div id="top">top</div>
<div id="center">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>
以上是DOM樹的結構 - - - 以下是less的文件結構 兩種結構特別相似.能夠清晰的編寫和維護代碼.增加代碼的可讀性.
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中引入這個屬性集合了.像調用函數(shù)那樣去調用這個屬性集合
.post a {
color: red;
.bordered;
}
這樣在**a**標簽中就可以調用.bordered這個屬性的所有的屬性.而.bordered就像是一個可以調用的函數(shù)一樣,擁有這兩個屬性了..
