SASS normale Klasse und verschachtelte Klasse haben gleiches Attribut

Question

Ich bin eine verschachtelte Klasse und eine normale Klasse will die gleichen Attribute zu verwenden. Zum Beispiel ...

.menu-container ul li.run a, 
body[data-primary-tags*='run'] { 
    .article-overview-header, 
    .article-detail-header-strip, 
    .article-detail-sub-header { 
     background-color: $run; 
    } 
} 

Offensichtlich wird dies nicht funktionieren, aber ist es eine Möglichkeit, li.run a und die verschachtelte Klasse hat die gleiche Hintergrund-Farbe zu haben?

Answer 1

SASS Mit @extend Sie so etwas tun könnten:

.my-special-class 
    background-color: $run 

.menu-container ul li.run a, 
body[data-primary-tags*='run'] 
    @extend .my-special-class 

    .article-overview-header, 
    .article-detail-header-strip, 
    .article-detail-sub-header 
     @extend .my-special-class 

Um das zu erreichen, dass in reiner CSS sollten Sie übergeordnete Klasse Hintergrundfarbe Ihrer Wahl, und lassen Sie verschachtelte Klasse hat Werte erben. Obwohl sie Kinder der ersten Generation sein müssten, um den richtigen Wert zu erben.