CSS拡張機能が期待通りに機能しない

Question

私は、スタイルを拡張機能を使って設定しました。問題は、特定の状況下では機能しておらず、論理的に見えないことです。

私はCSSを単純化しましたが、問題は同じです。

#how-it-works { 
    .timeline { 
     & > .timeline-step { 

      & > h3:extend(.h3-text) {} 
     } 
    } 
} 

上記の例では、LESSはCSSを出力しません。私はこのような外層削除する場合

しかし、：

.h3-text, 
h3:not([class]), 
.timeline > .timeline-step > h3, 
.legal-info dt, 
.call-to-action .rapr { 
    color: #424242; 
    font-size: 20px; 
    line-height: 28px; 
} 

外側のスタイルはクラスがあるかどうかは関係ありませんか：

.timeline { 
    & > .timeline-step { 

     & > h3:extend(.h3-text) {} 
    } 
} 

を私は、出力は私が必要とする取得しますID。

誰かが状況にどんな光を投げかけていますか？

Answer 1

これは非常に奇妙な種類の動作ですが、現在私はこのように動作する理由については説明していませんが、回避策があります。実際のネストされたセレクタ（最も内側のセレクタを除く）の前のすべてのレベルで親セレクタ（&）を使用すると動作するようです。

:extend()の機能がどれくらいの期間存在し、このシナリオがどれほど一般的であるかを考慮すると、意図した機能になる可能性があります。私はそれを見つけるために管理したら、私はその理由についての詳細な説明を追加します:)

.h3-text{ 
    color: #424242; 
    font-size: 20px; 
    line-height: 28px; 
}  
#how-it-works { 
    & .timeline { 
     & > .timeline-step { 
      & > h3:extend(.h3-text) {}; 
     } 
    } 
} 

---

をも動作するようです別のアプローチは、すべてのレベルで&（親セレクター）を避けるためです。 &は基本的に何もしていないので、この特定のシナリオでは大きな問題ではありません。

.h3-text{ 
    color: #424242; 
    font-size: 20px; 
    line-height: 28px; 
}  
#how-it-works { 
    .timeline { 
     > .timeline-step { 
      > h3:extend(.h3-text) {}; 
     } 
    } 
} 

---

でも:extendルールセット作品の内部。セレクタに接続された:extendが使用され、セレクタがあるレベルでのみ&の場合に問題が発生しているようです。

.h3-text{ 
    color: #424242; 
    font-size: 20px; 
    line-height: 28px; 
} 
#how-it-works { 
    .timeline { 
     & > .timeline-step { 
      & > h3 { 
       &:extend(.h3-text); 
      } 
     } 
    } 
}