Eine bessere Möglichkeit, diese SASS Regeln

Question

ich einige Bootstrap Regeln mit SASS zu überschreiben müssen schreiben:

.open>.btn-default.dropdown-toggle{ 
    background-color: transparent; 
    color: red; 

    &:focus, &:hover{ 
     background-color: transparent; 
     color: red; 
    } 

    &:active:focus{ 
     outline: 0; 
    } 
} 

Gibt es einen besseren Weg, dies zu schreiben? Ohne zu wiederholen background-color und color?

Answer 1

Sie könnten eine mixin wie folgt verwenden:

@mixin red-and-transparent { 
    background-color: transparent; 
    color: red; 
} 

Und es wie folgt verwenden:

.open>.btn-default.dropdown-toggle{ 
    @include red-and-transparent; 

    &:focus, &:hover{ 
     @include red-and-transparent; 
    } 
} 

Aber für 2 Objekte zweimal verwendet, würde ich nicht mit dieser Mühe und lass es einfach wie du es jetzt hast.

Answer 2

Sie könnten eine Platzhalterklasse ähnlich einem Mixin erweitern, aber das Ausgabe-CSS ist sauberer. Dies wäre der empfohlene Ansatz für kleinere Dinge. Eine Platzhalterklasse beginnt mit % und wird in CSS nicht als einzelne Klasse ausgegeben, sondern gruppiert alle Regeln, die sie verwenden, so dass sie nicht wiederholt wird.

%red-transparent { 
    background-color: transparent; 
    color: red; 
} 
.open>.btn-default.dropdown-toggle{ 
    @extend %red-and-transparent; 

    &:focus, &:hover{ 
     @extend %red-and-transparent; 
    } 
} 

Ergebnisse in diesem css

.open > .btn-default.dropdown-toggle, .open > .btn-default.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle:hover { 
    background-color: transparent; 
    color: red; 
}