Less简单用法

使用工具 Hbuilder

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="d1">
            <ul>
                <li>
                    <a href="#">百度</a>
                </li>
                <li>
                    <a href="#">谷歌</a>
                </li>
            </ul>
        </div>
        <div id="two"></div>
    </body>
</html>

LESS文件

main.less
body{font-size: 30px;}


style.less

@import "main.less";
@font-family:'宋体';
@color1:red;
@color2:#fff;
@color3:#666;

div#d1{
    ul{
        li{
            list-style: none;
            border: 1px solid @color1;
            a{
                display: block;
                padding: 3px 10px;
                background: @color1;
                text-decoration:none;
                color:@color2;  
                &:hover{
                    background: @color3;
                }
            }
        }
    }
}

//定义一个函数来使用
.rounded(@radius:5px){
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

div#two{
    width: 300px;
    height:300px;
    border: 1px solid @color3;
    .rounded;   
}