less实例

最新推荐文章于 2022-05-16 20:56:28 发布

banfu6521

最新推荐文章于 2022-05-16 20:56:28 发布

阅读量189

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wmwPro/p/5460509.html

版权

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

banfu6521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
less实例

html 中的代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet/less" type="text/cs...
复制链接

扫一扫

less实例

“相关推荐”对你有帮助么？