2. it
  3. less实例

less实例

mac2022-06-30  61
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文件内容

@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可以自行到网上下载，最新版本的即可。

转载于:https://www.cnblogs.com/wmwPro/p/5460509.html

相关资源：在angular 6中使用 less 的实例代码
最新回复(0)