1,在准备编写HTML文件时
引入less.js或者<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
2,目标CSS必须从外部引入，并且rel="stylesheet/less"
例如：<link rel="stylesheet/less" href="new_file.css" />
3,完整demo代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> <link rel="stylesheet/less" href="new_file.css" /> <link rel="import" href="new_file.html" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script> </head> <body> <div class="top"> <div class="circle"> <em></em> </div> <div class="rectangle"> <p></p> <p></p> <p></p> </div> </div> </body> </html>
css代码如下：
@blue:#28757D;
@bg1:#A3B225;
@bg2:#EA822D;
@bg3:#40B0B1;
@height:200px;
.height(@height){
height: @height;
}
.border{
border: 1px solid @blue;
border-radius: 50%;
}
body,div,p,html{
padding: 0;
margin: 0;
}
.top{
100%;
.height(@height);
position: relative;
.circle{
60%;
.height(@height);
background: @blue;
margin: 0 auto;
.border;
em{
.border;
display: block;
margin: 20px;
79%;
background: #FFFFFF;
.height(156px);
}
}
.rectangle{
90%;
.height(80px);
clear: both;
position: absolute;
left: 5%;
top: 122px;
p{
height: 100%;
33%;
float: left;
}
p:nth-child(1){
background: @bg1;
}
p:nth-child(2){
background: @bg2;
}
p:nth-child(3){
background: @bg3;
}
}
}
iPhone4下效果呈现：
官方链接：http://lesscss.org/