less 是一門 CSS 預處理語言,它擴展了 CSS 語言筐钟,增加了變量、Mixin赋朦、函數(shù)等特性篓冲,使 CSS 更易維護和擴展。
一宠哄、傳統(tǒng)寫法與 less 寫法對比
1. 傳統(tǒng) css 寫法:
.content ul{
list-style:none;
}
.content li{
height:24px;
line-height:25px;
padding-left:15px;
}
.content li a{
color:#535353;
text-decoration:none;
font-family:"微軟雅黑";
}
2. less 寫法:
.content ul{
list-style: none;
li{
height:24px;
line-height:25px;
padding-left:15px;
a{
color:#535353;
text-decoration:none;
font-family:"微軟雅黑";
}
}
}
二壹将、less 的注釋
//:以//開始的注釋,不會被編譯到 css 文件中
/**/:以 /**/包裹的注釋會被編譯到 css 文件中
三毛嫉、less使用方法
1. 如何使用 less:less 文件只有在被編譯后才能夠被瀏覽器識別使用
2. less 方式使用方法有兩種:
① less 編譯工具:
- Koala诽俯,國人開發(fā)的全平臺的 less 編譯工具
下載地址:http://koala-app.com/- WinLess,Windows 下的 less 編譯軟件
下載地址:http://winless.org- CodeKit承粤,MAC 平臺下的 less 編譯軟件
下載地址:http://incident57.com/codekit/index.html
②客戶端調(diào)用方式:
- 首先引用 less 文件惊畏,注意引用時使用 link 引入,然后將 rel 屬性設置為
rel="stylesheet/less"- 然后引用 less.js密任,注意:與引入普通 js 引入方式一致颜启,但是一定要放置再 less
樣式文件之后!