中文API
http://lesscss.cn
变量
@变量名:变量值
@maincolor:#aeeeee;
@acolor:#ffffff;
@ht200:200px;
@ht50:50px;
@wh980:980px;
@lht50:50px;
应用
header nav{
background-color: @maincolor;
width: @wh980;
height: @ht50;
}
编译
header nav {
background-color: #aeeeee;
width: 980px;
height: 50px;
}
效果
定义类
.BRradius(@radius:5px){
border-radius: @radius;
}
应用
header nav{
background-color: @maincolor;
width: @wh980;
height: @ht50;
/*或*/
.BRradius;
.BRradius(10px);
}
编译
header nav {
background-color: #aeeeee;
width: 980px;
height: 50px;
border-radius: 10px;
}
效果
嵌套规则
//嵌套语法
header{
//定义less局部变量变量
//进行四则运算
@navcolor:@maincolor - #111;
width: 1024px;
margin: 0 auto;
nav{
background-color: @navcolor;
width:@wh980;
height: @ht50;
.BRradius(10px);
ul{
list-style: none;
li{
float: left;
width: 100px;
line-height: @lht50;
a{
color: @acolor;
text-align: center;
text-decoration: none;
display: block;
//添加&是解析的是同级元素或此元素伪类
&:hover{
background-color: #8DEEEE;
}
}
}
}
}
}
页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet/less" type="text/css" href="css/style.less"/>
<script type="text/javascript" src="js/less.min.js" ></script>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">蔚为简介</a></li>
<li><a href="#">蔚博客</a></li>
</ul>
</nav>
</header>
<section></section>
<footer></footer>
</body>
</html>
效果
编译less
1.浏览器编译less
下载less.min
<script type="text/javascript" src="js/less.min.js" ></script>
2.nodejs编译
中文网http://www.nodejs.cn
官网https://www.nodejs.org
在环境变量添加安装路径
使用node安装编译less
通过命令 npm install less -g 全局安装less
使用lessc命令对less文件进行编译
格式：lessc目标文件目录 生成css文件目录
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
