Question

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

以下是基础知识：

我有一个混音：

.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()中的伪元素来消除它，但显然这不是一个修复。

在非缩小样式表中代码似乎没问题，但在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代码的问题

1 个答案: