LESS第二课
变量插值：
<!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>
在这里插入图片描述
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/07/20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
