Impostare lo stesso valore su più proprietà (CSS)

Question

Sembra una domanda così stupida ma non riesco a trovare la risposta da nessuna parte.

C'è un modo per impostare più proprietà CSS per un valore

border-left, border-right: 1px solid #E2E2E2; 

il modo in cui si può fare con i selettori?

.wrapper, .maindiv { ... } 

Answer 1

No. Ma per il tuo esempio, si può fare questo:

border: solid #E2E2E2; 
border-width: 0 1px; 

Gli attributi in cui ci possono essere valori separati per alto, a destra, in basso, e se ne andò (ad esempio, border-*, margini, padding) di solito può essere combinati in un singolo attributo.

Answer 2

Non è possibile, a meno che non si fa:

border: 1px solid #E2E2E2; 

..che imposta lo stesso confine su tutti i lati. Se vuoi controllarli individualmente, devi scriverli come dichiarazioni separate.

Si noti che in alcuni casi, è possibile impostare più valori per un attributo, ma non è possibile avere più attributi con un valore in un'istruzione.

Answer 3

Non possibile con semplice css, ma è possibile dare un'occhiata a scss o less che potrebbero avere soluzioni per il tuo problema.

Una soluzione con i CSS semplice è il seguente:

border: 1px solid #E2E2E2; 
border-width: 0px 1px; 

Answer 4

Se gli attributi sono legati, come è il caso con border-left e border-right, c'è di solito è un attributo comune che permette di impostare loro:

Dall'altro lato, ci sono alcune librerie come Less CSS che estendono i CSS in modo da poter facilmente raggruppare proprietà e attributi correlati.

Answer 5

CSS non consente tale controllo. Una soluzione alternativa consiste nell'utilizzare una regola più grande, quindi limitarla:

border: 1px solid #E2E2E2; 
border-top: 0; 
border-bottom: 0; 

Ma si finisce con altro codice. Un'altra soluzione è quella di utilizzare i CSS "compilatore", come SASS o Less

Answer 6

Se stai usando sass, provate questo:

@mixin border($properties , $value){ 
    @each $property in $properties{ 
     border-#{$property}: $value; 
    } 
} 

selector{ 
    @include border(left right, 1px solid #E2E2E2); 
}