縮小されたLESS CSSコードの問題

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()の疑似要素を削除することで、問題を解決することはできますが、それは修正されていないことは明らかです。

コードはどれも縮小さ、スタイルシートでOKようだが、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} 

あなたはすべてのコード以下は、内部で出力されて見ることができるように存在し、より実際のですが、擬似要素に属する中括弧。

私はそれが自分のコードであるかレッズであるかは分かりません。

誰でもアドバイスしますか？

Answer 1

多くのテストの後、私は問題の根本原因を発見しました。

実際にはコードからスタイルシートをさらに上に伸ばしますが、実際には上のコードに当たるまで実際には壊れません。

ここでLESSを破ったコードです：

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

は具体的には、それはエスケープスラッシュだが。