MVC 捆绑通过删除空格来破坏我的计算 CSS 语句

Question

我有这样的css语句：

margin-left: calc(50% - 480px);

哪个工作很好，但一旦我开始缩小，该语句就会更改为：

margin-left: calc(50%- 480px);

呈现所有 calc 语句已损坏。 宽度、最大宽度、最小宽度等也会发生类似的事情。 有什么方法可以更改捆绑包的行为以保留这些 CSS 属性吗？

目前我只是使用bundles.Add(new Bundle())来完全防止缩小，但如果我可以正确缩小，那就太好了。

Answer 1

这是优化器的问题。

若要避免最小值删除空格，请用括号对受影响的元素进行分组。这就解决了这个问题。

margin-left: calc((50%) - 480px);

Answer 2

除了上面的答案：如果您使用：

margin-left: calc((50%) + 480px);

您应该将其重写为：

margin-left: calc((50%) - -480px);

因为它似乎没有为我修复 （50%）+。

Answer 3

如果默认的 css 缩小没有满足您的需求，您可以随时使用第三方缩小。

捆绑允许您使用自己的转换IBundleTransform

var bundle = new Bundle("~/Content/css", myCustomCssTransform);

有许多不同的捆绑器 - NuGet

例如，您可以使用 YUI 压缩器：

    using System.IO;
using System.Web.Optimization;
using Yahoo.Yui.Compressor;
namespace Bundler.Utilities
{
 public enum contentType
 {
  javascript,
  css
 }
 public class YUITransform : IBundleTransform
 {
  readonly string _contentType = string.Empty;
  public YUITransform(contentType contentType)
  {
   if (contentType == contentType.css)
   {
    this._contentType = "text/css";
   }
   else
   {
    this._contentType = "text/javascript";
   }
  }
  public void Process(BundleContext context, BundleResponse bundle)
  {
   bundle.ContentType = this._contentType;
   string content = string.Empty;

   foreach (FileInfo file in bundle.Files)
   {
    using (StreamReader fileReader = new
StreamReader(file.FullName)) {
     content += fileReader.ReadToEnd();
     fileReader.Close();
    }
   }
   bundle.Content = Compress(content);
  }
  string Compress(string content) {
   if (_contentType == "text/javascript")
   {
     return JavaScriptCompressor.Compress(content);
   }
   else
   {
    return CssCompressor.Compress(content,
                           CssCompressionType.StockYuiCompressor
);
   }
  }
 }
}

Answer 4

这是

完全正常的，因为它指的是CSS值和单位模块。

以下功能存在风险，可能会在 CR 期间丢弃 句点： 'calc（）'， 'toggle（）'， 'attr（）'."

如果你可以跳过那里的空格，那不会是一个完全的缩小。一个选项是用 unicode caracter 0A0

Answer 5

注意在 calc 中使用变量。你最终可能会得到另一个 CssMinify（） 错误：

@myVariable: 0em;
margin-left: calc((50%) - @myVariable);

被压缩并切断单位：

margin-left: calc((50%) - 0);

它也不是有效的 calc（） 调用！

Answer 6

此问题似乎已在 YUI 压缩器的 2.4.9 版本中修复，可以从此处访问 https://mvnrepository.com/artifact/com.yahoo.platform.yui/yuicompressor?repo=bsi-business-systems-integration-ag-scout。我用过这个css文件：

body{
    font-size: calc(50% - 3px);
    font-size: calc(50% + 3px);
    font-size: calc(50% + +3px);
    font-size: calc((50%) + (3px));
    font-size: calc(50% + (+3px));
    font-size: calc(50% + (3px));
    font-size: calc(50% - (-3px));
    font-size: calc(50% - -3px);
}

并运行以下命令：

java -jar yuicompressor-2.4.9-BSI-2.jar --line-break 0 -o process.css.min.gz file.css

生成此输出，看起来不错：

body{font-size:calc(50% - 3px);font-size:calc(50% + 3px);font-size:calc(50% + +3px);font-size:calc((50%)+(3px));font-size:calc(50% + (+3px));font-size:calc(50% + (3px));font-size:calc(50% - (-3px));font-size:calc(50% - -3px)}