缩小 LESS CSS 代码的问题

Question

我有一些代码在缩小输出中没有正确呈现。

这是基础知识：

我有一个mixin：

.Aspect(@widthRatio:16; @heightRatio:9; @useableWidth:100%) {
    display:block;
    overflow:hidden;
    max-width:@useableWidth;

    &::before {
        content:"";
        float:left;
        padding-top:percentage(@heightRatio / @widthRatio);
    }
}

...和一些样式：

.backdrop {
    position:absolute;
    top:0;
    left:0;
    width:100%;

    .Aspect(1; 1);

    .Landscape({
        .Aspect(16; 9);
    });
}

.app-bar-spacer-3 {
    height:250px!important;
    background-color:Lime;
}

这是正在发生的事情。

.app-bar-spacer-3 样式不起作用，但这是由于先前样式 .backdrop 的渲染所致。

我可以通过删除 .Aspect() 中的伪元素让它消失，但显然这不是解决办法。

none 缩小样式表中的代码似乎没问题，但在 Chrome 中检查时，输出的是：

.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  overflow: hidden;
  max-width: 100%;
}
.backdrop::before {
  content: "";
  float: left;
  padding-top: 100%;
}
@media screen and (orientation: landscape) {
  .backdrop {
    display: block;
    overflow: hidden;
    max-width: 100%;
  }
  .backdrop::before {
    content: "";float:left;padding-top:56.25%}.app-bar-spacer-3{height:250px!important;background-color:#0f0}

实际上还有更多，但如您所见，以下所有代码都在属于伪元素的大括号内输出。

我看了这么久，不知道是我的代码还是LESS。

有人建议吗？

Answer 1

经过多次测试，我找到了问题的根本原因。

它确实从样式表更上层的代码中消除了，但实际上并没有中断，直到它遇到上面的代码。

这是破坏 LESS 的代码：

.md-text-tab {
    &:not(:last-child)::after {
        content:'\';
    }
}

更具体地说，它是转义的斜杠。

缩小 LESS CSS 代码的问题

Issue with minified LESS CSS code

css

less