浏览器端使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--先引入less文件再引入less.js-->
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.bootcss.com/less.js/3.0.4/less.min.js" ></script>
</head>
<body>
<div id="pageone">test less </div>
<div id="header">test</div>
<div id="footer">test2</div>
</body>
</html>/*less 注释语法。 定义变量*/
@color:blue;
#pageone {
/*引用变量*/
color:@color;
}
/*继承关系
混合
混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。*/
/*radius 变量 类似形参*/
.rounded-corners (@radius: 5px) {
border-radius: @radius ;
-webkit-border-radius: @radius ;
-moz-border-radius: @radius ;
font-size: @radius * 3;/*函数运算*/
}
#header {
.rounded-corners;
}
#footer {
/*10px 类似实参*/
.rounded-corners(10px);
}