gulp minify-css 压缩之后删除calc所在行解决

一、问题描述

在css代码中利用calc设置left值，但是使用gulp-minify-css压缩之后，却发现calc设置这一行在压缩之后的css中没有。如下：

压缩之前：

aside {
    position: fixed;
    top:50px;
    left:0;
    width: calc((100% - 1400px)/2);
    padding: 0 20px;
    box-sizing: border-box;
}

压缩之后的代码：（方便展示，我加入了换行）

aside {
    position: fixed;
    top:50px;
    left:0;
    padding: 0 20px;
    box-sizing: border-box;
}

二、问题解决

后面在尝试了许多次和查找calc的用法之后才发现，问题出现在我在使用calc时，忘记了在除号（/）两边加上空格。在MDN上是介绍calc的用法时（https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc），强调了以下几点：

注：用 0 作除数会让 HTML 解析器抛出异常.

注： + 和  - 运算符的两边必须始终要有空白符。比如  calc(50% -8px) 会被解析成为一个无效的表达式：一个百分比后跟一个负数长度值。而 calc(8px + -50%)  会被解析成为一个长度后跟一个加号再跟一个负百分比。
* 和  / 运算符不需要空白符，但考虑到统一性，仍然推荐加上空白符。

注： Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables MAY be treated as if  auto had been specified.

MDN上是解释说需要再使用+和-的时候两边要加上空格，这个检测需要编辑器也会检测，/和*不需要，所以编辑器也不会检测。我在chrome里面试了，不在/或者*两端加上空格，浏览器也是可以正确解析calc的。 但是使用gulp的时候没有在-或者*两端加上空格，calc所在的行就会被删除，导致错误。具体的原因也不清楚。

所以，解决的办法就是即使不在/和*两端加上空格不会影响浏览器的解析，但是为了避免出现使用gulp-minify的情况，最好在calc中使用/和*时，也在两边加上空格。