2019独角兽企业重金招聘Python工程师标准>>> 
http://www.bootcss.com/p/lesscss/
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script>
less = {
env: "development",
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
};
</script>
<script src="less.js"></script>
</head>
<body>
<header>
<h1>This is Header</h1>
</header>
<action>
<h1>This is Action</h1>
</action>
<footer>
<h1>This is Footer</h1>
<div>
<h2>This is Footer DIV</h2>
<a href="#">This is Footer a</a>
</div>
</footer>
</body>
</html>
styles.css
// LESS
// -ms- IE
// -moz- 火狐
// -webkit- 谷歌
// -o- Opera
// 1.变量允许单独定义一系列通用的样式，然后在需要的时候去调用
@headerColor: #ccc;
@actionColor: #111;
@footerColor: #f0f0f0;
// 2.可以将一个定义好的class A引入到另一个class B中，从而简单实现class B继承class A中的所有属性。
// 2.可以带参数地调用，就像使用函数一样
.myRadius(@radius: 10px){
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
// 4.进行运算
@border-length: 1px;
header{
background-color: @headerColor;
.myRadius;
}
action{
background-color: @actionColor;
}
footer{
background-color: @footerColor;
.myRadius(20px)
}
// 3.嵌套:减少了代码量，代码看起来更加的清晰。
footer{
h1{
color: aqua;
font-weight: bolder;
font-size: @border-length * 5;
}
div{
color: salmon;
a{
text-decoration: none;
font-size: 20px;
color: seagreen;
}
}
}