跟Howard学LESS之初见LESS

最新推荐文章于 2023-11-19 21:49:39 发布

weixin_33834075

最新推荐文章于 2023-11-19 21:49:39 发布

阅读量77

点赞数

原文链接：https://my.oschina.net/dxc8/blog/2995022

版权

为什么80%的码农都做不了架构师？>>>

跟Howard学LESS之初见LESS，不废话，上代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>初见LESS</title>
    <style type="text/css">
        .conten ul{
            list-style: none;
        }
        .conten li{
            height: 25px;
            line-height: 25px;
            padding-left: 15px;
            background: url("arr.jpg") no-repeat center left;
        }
        .conten li a{
            text-decoration: none;
            color: #535353;
            font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
        }
        /*less的写法如下*/
        .conten {
            ul{
                list-style: none;
            }
            li{
                height: 25px;
                line-height: 25px;
                padding-left: 15px;
                background: url("arr.jpg") no-repeat center left;
                a{
                    text-decoration: none;
                    color: #535353;
                    font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
                }
            }
        }
    </style>
</head>
<body>
<div class="conten">
    <ul>
        <li><a href="http://www.quban18.com/shiwuquban/dasuanquban/">大蒜祛斑</a>这是测试文档</li>
        <li><a href="http://www.quban18.com/zhongyaoquban/">中药祛斑</a>这是测试文档</li>
        <li><a href="http://www.quban18.com/shiwuquban/dasuanquban/">大蒜祛斑</a>这是测试文档</li>
    </ul>
</div>
</body>
</html>

跟Howard学LESS之初见LESS效果：

大蒜祛斑这是测试文档
中药祛斑这是测试文档
大蒜祛斑这是测试文档

LESS部份：

/*就会在LESS和CSS中显示*/
.conten {
  ul{
    list-style: none;
  }
  li{
    height: 25px;
    line-height: 25px;
    padding-left: 15px;
    background: url("arr.jpg") no-repeat center left;
    a{
      text-decoration: none;
      color: #535353;
      font-family: microsoft yahei, Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
    }
  }
}

转载于:https://my.oschina.net/dxc8/blog/2995022