Wie wiederverwenden gemeinsame CSS-Regeln in CSS (sass)

ich ein CSS-Stylesheet haben, wie untenWie wiederverwenden gemeinsame CSS-Regeln in CSS (sass)

.icon1 { 
    &:after { 
     content:""; 
     float: right; 
     width: 8px; 
     height: 8px; 
     border-radius: 100%;     
     background-color: #4ac102; 
     display: block; 
     position: relative; 
    } 
} 

.icon2 { 
    &:after { 
     content:""; 
     float: right; 
     width: 8px; 
     height: 8px; 
     border-radius: 100%;     
     background-color: #f1342f; 
     display: block;  
     position: relative; 
    } 
} 

.icon3 { 
    &:after { 
     content:""; 
     float: right; 
     width: 8px; 
     height: 8px; 
     border-radius: 100%;     
     background-color: #616a83; 
     display: block;  
     position: relative; 
    } 
}

Wie Sie mit Ausnahme der Hintergrund-Farbe alle anderen Eigenschaften gleich sind zu sehen. Kann ich diesen Code umgestalten, um ihn DRY zu machen?

Quelle

2016-07-19 Gagan

Dies ist eine Art von Off-Topic für SO. CodeReview * könnte * besser passen ... aber überprüfen Sie zuerst ihre Richtlinien. –

@Paulie_D warum würdest du denken, dass es nicht stimmt? – Gagan

Weil der Code funktioniert .... Das Aufräumen oder DRYen ist nicht wirklich ein SO-Problem. –

Sie Extend/Inheritance dafür verwenden können:

.icons { 
    content:""; 
    float: right; 
    width: 8px; 
    height: 8px; 
    border-radius: 100%;  
    display: block;  
    position: relative; 
    } 

    .icon1 { 
    &:after { 
     @extend .icons;    
     background-color: #4ac102; 
    } 
    } 
    .icon2 { 
    &:after { 
     @extend .icons;    
     background-color: #f1342f; 
    } 
    } 

    .icon3 { 
    &:after { 
     @extend .icons;    
     background-color: #616a83; 
    } 
    }

Quelle

2016-07-19 15:56:02

liebe es .. danke – Gagan

Für eine CSS/SCSS Lösung ohne zusätzliche Klassen:

.icon1, .icon2, .icon3 { 
    &:after { 
     /* shared code */ 
    } 
} 

.icon1 { 
    &:after { 
     /* unique code */ 
    } 
}

Quelle

2016-07-19 16:04:02 Toby

Ihre Lösung funktioniert, Aber wenn Sie Sass verwenden, bevorzugen Sie am liebsten Vererbung. –

vereinbart. Ich habe das für den allgemeinen Gebrauch gepostet, und weil der OP-Code nichts sass-spezifisches benutzt. – Toby

ist besser, nicht eine Klasse in HTML erstellen, welche Symbole sein wird und eine weitere Klasse nur für Hintergrundfarbe? In diesem Fall werden Sie etwas wie dieses:

<div class="icon icon-1"></div> 
<div class="icon icon-2"></div> 
<div class="icon icon-3"></div>

und Stile wie:

.icon { 
    content:""; 
    float: right; 
    width: 8px; 
    height: 8px; 
    border-radius: 100%;  
    display: block;  
    position: relative; 
    } 


.icon-1{ 
    background-color: #f1342f; 
} 
.icon-2{ 
    background-color: #616a83; 
} 
.icon-3{ 
    background-color: #4ac102; 
}

Quelle

2016-07-19 18:47:02

Wie wiederverwenden gemeinsame CSS-Regeln in CSS (sass)

Antwort

Verwandte Themen