less实例
html 中的代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><link rel="stylesheet/less" type="text/css" href="css/style.less"/><script src="js/less.min.js" type="text/javascript" charset="utf-8"></script></head><body><div>0</div><ul><li class="special">1</li><li>2</li><li class="special"><a class="a">3</a></li><li>4</li><li>5</li></ul></body> </html>
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title><link rel="stylesheet/less" type="text/css" href="css/style.less"/><script src="js/less.min.js" type="text/javascript" charset="utf-8"></script></head><body><div>0</div><ul><li class="special">1</li><li>2</li><li class="special"><a class="a">3</a></li><li>4</li><li>5</li></ul></body> </html>
css中Less文件內(nèi)容
@background-color:#f66; .border-radius (@radius) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } .border-shadow(@x,@y,@z,@color){-webkit-box-shadow: @arguments;-moz-box-shadow: @arguments;box-shadow: @arguments; } @base-color: #111; @red: #842210;.border{border: 20px solid #ddd;text-align: center;margin-top: 3px;.border-radius(5px);.border-shadow(3px,3px,5px,#000);// color: @base-color + #003300;// 飽和度降低 10%// border-color: desaturate(@red, 10%); } div{width: 120px;height: 120px;background: @background-color;.border; } ul>li{width: 50px;height: 20px;background: @background-color;.border;&.special{font-size: 40px;.a{color: red;}}}js中的less.min.js可以自行到網(wǎng)上下載，最新版本的即可。
轉(zhuǎn)載于:https://www.cnblogs.com/wmwPro/p/5460509.html
總結(jié)
- 上一篇： 民生卡是什么
- 下一篇： 关于图片延迟加载的解决方案（针对移动端）