变量插值：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*@size:200px;
@w:width;
@s:div;
@{s}
{
@{w}:@size;
height:@size;
background:red;
}*/
/*编译后...*/
div {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
记住。如果选择器名称与属性名称想使用变量里面的值需要用变量插值.
属性的值想使用变量的名称可以直接使用。
2.变量插值的格式
格式: @{变量名称}
less中的运算：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*div
{
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 50%;
/*less中的运算和CSS3中新增的calc函数一样, 都支持+ - * / 运算*/
/*margin-left:(-200px/2) ;
}*/
/*编译后的css文件。*/
div {
width: 200px;
height: 200px;
background: red;
position: absolute;
left: 50%;
margin-left: -100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
