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>

如上的写法虽然可以居中显示但是还是有弊端，这种方式需要自己口算元素它宽度的一半是多少，如果这个时候元素的宽度不利于我们去计算，那么就会造成我们不利于去编写代码了，为了解决这个问题可以使用第二种方式那么就是使用 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>

使用 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>

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);
}