CSS - Estendere le proprietà della classe

Question

Sono abbastanza nuovo per i CSS e ho trovato la mia strada fino ad ora. Sto creando questi pulsanti come collegamenti con ombre e cose del genere. Ora ci sono diversi pulsanti di questo tipo richiesti sul sito: tutto ciò che riguarda i pulsanti è lo stesso, tranne alcune proprietà che cambiano come la larghezza e la dimensione del carattere.

Ora invece di copiare lo stesso codice - più e più volte per ogni pulsante - c'è un modo per estendere il pulsante e aggiungere solo le proprietà che cambiano.

Esempio di due pulsanti - css

.ask-button-display { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
width:350px; 
font-size: 20px; 
font-weight: bold; 
padding:10px; 
} 


.ask-button-submit { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
font-weight: bold; 
width:75px; 
font-size: 12px; 
padding: 1px; 
} 

E questo è il modo Attualmente sto usando nella mia html

<a href="/" id="ask-question-link" class="ask-button-display">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a> 

quindi mi chiedo se c'è un modo più pulito per farlo questo - come

.button { 
/* PUT ALL THE COMMON PROPERTIES HERE */ 
} 

AND THEN SOMEHOW EXTEND IT LIKE 
.button #display { 
/* THE DIFFERENT PROPERTIES OF Display BUTTON */ 
} 

.button #ask { 
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */ 
} 

Ma non sono sicuro di come farlo. Grazie per il vostro input

Answer 1

È possibile aggiungere più classi a un elemento, in modo da avere una classe apri un che copre tutto, poi un apri un-submit classe, che aggiunge le cose in

Ad esempio:.

.button { 
    padding: 10px; 
    margin: 10px; 
    background-color: red; 
} 

.button-submit { 
    background-color: green; 
}​ 

Vedere un live jsFiddle here

Nel tuo caso, il seguente dovrebbe funzionare:

.button { 
    background: #8BAF3B; 
    border-radius: 4px; 
    display: block; 
    letter-spacing: 0.5px; 
    position: relative; 
    border-color: #293829; 
    border-width: 2px 1px; 
    border-style: solid; 
    text-align:center; 
    color: #FFF; 
    width:350px; 
    font-size: 20px; 
    font-weight: bold; 
    padding:10px; 
} 


.button-submit { 
    width:75px; 
    font-size: 12px; 
    padding: 1px; 
}​ 

Vedere un live jsFiddle here

Answer 2

.ask-button-display, 
.ask-button-submit { 
    /* COMMON RULES */ 
} 

.ask-button-display { 

} 

.ask-button-submit { 

} 

Answer 3

aggiungere una classe pulsante per entrambi i collegamenti per le parti comuni

.button { 
background: #8BAF3B; 
border-radius: 4px; 
display: block; 
letter-spacing: 0.5px; 
position: relative; 
border-color: #293829; 
border-width: 2px 1px; 
border-style: solid; 
text-align:center; 
color: #FFF; 
} 

tenere in altre classi le regole che non sono comuni.

E il codice HTML sarà

<a href="/" id="ask-question-link" class="button ask-button-display">Ask a Question</a> 
<a href="/" class="button ask-button-submit" id="ask-button-submit">Submit</a> 

Answer 4

Si può fare questo dal momento che è possibile applicare più di una classe a un elemento. Crea la tua master class e altre classi più piccole e poi applicale solo se necessario. Per esempio:

<a href="/" id="ask-question-link" class="button submit">Ask a Question</a> <a href="/" class="ask-button-submit" id="ask-button-submit">Submit</a> 

Questo si applicherebbe il pulsante e inviare le classi si creerebbe, consentendo di applicare anche quelle classi separatamente.

Modificare il tuo esempio di codice lungo le linee di:

.master_button { 
/* PUT ALL THE COMMON PROPERTIES HERE */ 
} 
AND THEN SOMEHOW EXTEND IT LIKE 
.button_display { 
/* THE DIFFERENT PROPERTIES OF Display BUTTON */ 
} 
.button_ask { 
/* THE DIFFERENT PROPERTIES OF Ask BUTTON */ 
} 

e applicare come:

<a href="/" id="ask-question-link" class="master_button button_ask">Ask a Question</a> 
<a href="/" class="master_button submit" id="ask-button-submit">Submit</a> 

Answer 5

Si consiglia di guardare in Sass. Con Sass puoi fondamentalmente creare variabili nel tuo file css e poi riutilizzarle più e più volte.http://sass-lang.com/ L'esempio seguente è stato preso dal Sass sito ufficiale:

$blue: #3bbfce; 
$margin: 16px; 

.content-navigation { 
    border-color: $blue; 
    color: 
    darken($blue, 9%); 
} 

.border { 
    padding: $margin/2; 
    margin: $margin/2; 
    border-color: $blue; 
} 

Answer 6

Piuttosto che ripetere il comune "aggiungere una classe pulsante per l'elemento" risposta che sto per mostrarvi qualcosa di nuovo nel mondo strano e whacky di CSS di nuova era, o meglio conosciuto come SCSS!

Questo riutilizzo del codice nei fogli di stile può essere ottenuto con qualcosa chiamato "Mixin". Ciò che questo ci consente di riutilizzare determinati stili è l'attributo '@include'.

Lasciatemi fare un esempio.

@mixin button($button-color) { 
    background: #fff; 
    margin: 10px; 
    color: $color; 
} 

e poi ogni volta che abbiamo un pulsante diciamo

#unique-button { 
    @include button(#333); 
    ...(additional styles) 
} 

Read more here: http://sass-lang.com/tutorial.html.

Diffondi la parola !!!

Answer 7

Si potrebbe desiderare di provare questo:

.button { 
    padding: 10px; 
    margin: 10px; 
    background-color: red; 
} 

.button.submit { 
    background-color: green; 
} 
.button.submit:hover { 
    background-color: #ffff00; 
} 

In questo modo si evita di ripetere la parola e sarà in grado di utilizzare le classi negli elementi come questo:

<a href="/" id="btnAsk" class="button">Ask a Question</a> 
<a href="/" id="btnSubmit" class="button submit">Submit</a> 

Vedere l'esempio JSFiddle (http://goo.gl/6HwroM)