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中使用/和*時，也在兩邊加上空格。