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>

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

posted @ 2016-05-05 08:56  apestack  阅读(225)  评论(0)  编辑  收藏  举报