Inclusa un'altra classe in SCSS

309

Ho questo nel mio file SCSS:

.class-a{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{

 //Inherite class-a here

 //some properties
}

Nella classe b, vorrei ereditare tutte le proprietà e le dichiarazioni nidificate di class-a. Come si fa? Ho provato a usare @include class-a, ma questo genera un errore durante la compilazione.

inheritance sass

— F21
fonte

624

Sembra @mixine @includenon sono necessari per un caso semplice come questo.

Si può semplicemente fare:

.myclass {
  font-weight: bold;
  font-size: 90px;
}

.myotherclass {
  @extend .myclass;
  color: #000000;
}

— F21
fonte

40

@extend funziona bene, ma non funzionerà se una delle classi è all'interno di una direttiva (di solito una media query); a meno che non siano entrambi nella stessa direttiva.

— MartinAnsty,

13

vedere qui per alcuni fatti divertenti su @extend- ci sono alcuni effetti collaterali difficili di cui dovresti essere a conoscenza: stackoverflow.com/questions/30744625/…

— Toni Leigh

2

Grazie @ToniLeigh, PlaceHolder è interessante in quanto risparmia la generazione di un selettore CSS aggiuntivo se il selettore padre viene utilizzato solo per estendere (non utilizzato da nessuna parte). Come nell'esempio sopra .myclassnon viene utilizzato altrove (suppongo) a parte .myotherclass, quindi è meglio averlo .myclassdefinito %myclassed esteso in .myotherclassas @extend %myclass;. .myotherclass{ font-weight: bold; font-size: 90px; color: #000000; }

— Genererà

5

Esempio di utilizzo del segnaposto Vs Esempio di utilizzo del normale selettore di classe

— Abhijeet

@MartinAnsty Bene, fa schifo.

— Abram,

51

Prova questo:

Crea una classe base segnaposto (% base-classe) con le proprietà comuni
Estendi la tua classe (.my-base-class) con questo segnaposto.

Ora puoi estendere% base-class in una qualsiasi delle tue classi (es. My-class).

%base-class {
   width: 80%;
   margin-left: 10%;
   margin-right: 10%;
}

.my-base-class {
    @extend %base-class;
}

.my-class {
    @extend %base-class;
    margin-bottom: 40px;
}

— Ashwin
fonte

Penso che questa risposta sia la stessa di quella più popolare. Ho ragione?

— Yevgeniy Afanasyev,

1

@Yevgeniy Afanasyev No, non estendi direttamente una classe, ma puoi estendere direttamente un segnaposto.

— Ashwin,

Non è mai stato chiesto :(

— Yevgeniy Afanasyev il

1

@Yevgeniy Afanasyev estendere direttamente la classe (la risposta più popolare) non ha funzionato per me, ma l'estensione di un segnaposto ha fatto il lavoro. Quindi ho pubblicato la risposta poiché non è la stessa risposta.

— Ashwin,

3

Grazie per aver pubblicato una risposta alternativa, ma dalla tua risposta non è chiaro perché ne abbiamo bisogno. Se per favore puoi aggiungere più ragionamenti per chiarire un caso d'uso o vantaggi di questo approccio, sarebbe apprezzato. Grazie.

— Yevgeniy Afanasyev,

16

L'uso di @extend è un'ottima soluzione, ma tieni presente che i CSS compilati interromperanno la definizione della classe. Tutte le classi che estendono lo stesso segnaposto verranno raggruppate insieme e le regole che non sono estese nella classe saranno in una definizione separata. Se diverse classi vengono estese, può diventare indisciplinato cercare un selettore nel CSS compilato o negli strumenti di sviluppo. Considerando che un mixin duplicherà il codice di mixin e aggiungerà altri stili.

Puoi vedere la differenza tra @extend e @mixin in questo sassmeister

— Ari
fonte

Il collegamento sassmeister è interrotto.

— LexieHankins,

11

@extend .myclass;
@extend #{'.my-class'};

— mcmaxwell
fonte

22

Mentre questo codice può rispondere alla domanda, fornendo un contesto aggiuntivo riguardo al perché e / o al modo in cui questo codice risponde alla domanda migliora il suo valore a lungo termine.

— adiga,

2

@extend #{'.my-class', '.my-other-class'};

— iarroyo,

2

Qual è il significato dell'hashbang qui?

— Konrad Viltersten,

7

Un'altra opzione potrebbe essere l'utilizzo di un selettore di attributi:

[class^="your-class-name"]{
  //your style here
}

Considerando che ogni classe che inizia con "your-class-name" utilizza questo stile.

Quindi nel tuo caso, potresti farlo in questo modo:

[class^="class"]{
  display: inline-block;
  //some other properties
  &:hover{
   color: darken(#FFFFFF, 10%);
 }  
}

.class-b{
  //specifically for class b
  width: 100px;
  &:hover{
     color: darken(#FFFFFF, 20%);
  }
}

Ulteriori informazioni sui selettori di attributi su w3Schools

— Khanji
fonte