less中的运算
原创
本章节需要讲解的是 less 中的运算，在看 less 中的运算之前我先提一个需求，就是让一个 div 元素居中显示，如下就是实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BNTang</title>
<style>
div {
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
margin-left: -100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
image-20210807153443226
如上的写法虽然可以居中显示但是还是有弊端，这种方式需要自己口算元素它宽度的一半是多少，如果这个时候元素的宽度不利于我们去计算，那么就会造成我们不利于去编写代码了，为了解决这个问题可以使用第二种方式那么就是使用 c3 新增的一个 transform 来进行水平居中显示如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BNTang</title>
<style>
div {
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>image-20210807153443226
使用 c3 新增的 transform 来进行居中那么就是浏览器必须支持 c3 才可以实现，不利于兼容，除了使用 transform 以外在 CSS3 中还新增了一个 calc 函数，可以实现简单的 +、-、*、/、运算
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BNTang</title>
<style>
div {
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
margin-left: calc(-200px / 2);
/*
如上除了可以使用宽度除以2其实还可以乘以0.5
margin-left: calc(-200px * 0.5);
*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>image-20210807153443226
calc 函数和 transform 一样不利于兼容，因为两个属性是 CSS3 新增的，只有支持 C3 属性的浏览器才可以使用，那么不就是没有一个方案是完美的，那么这个时候就可以使用 less 中的运算了，less 中的运算和 CSS3 中新增的 calc 函数一样，都支持 +、-、*、/、运算
div {
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
margin-left: (-200px * 0.5px);
// margin-left: (-200px / 2px);
}
image-20210807155851891
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
