È possibile in SASS ereditare da una classe in un altro file?

102

La domanda dice praticamente tutto.

Ad esempio, se stessi usando, ad esempio, Twitter Bootstrap , potrei definire classi nel mio foglio di stile SASS che ereditano dalle classi CSS di Bootstrap? O l'ereditarietà in SASS funziona solo nell'ambito di un singolo file?

— Dan Tao
fonte

180

SÌ! è possibile.

Se vuoi che tutti gli <button>elementi ereditino la .btnclasse dai pulsanti predefiniti di Twitter Bootstrap

Nel tuo styles.scssfile dovresti prima importare _bootstrap.scss:

@import "_bootstrap.scss";

Quindi sotto l'importazione:

button { @extend .btn; }

— agustibr
fonte

Mi dispiace per averlo fatto poiché le altre risposte hanno praticamente risposto a questa domanda (ho solo trascurato di ricontrollare per un po 'e poi me ne sono dimenticato); ma accetto la tua risposta perché è la più completa, cioè mi guida attraverso l'intero processo. Grazie!

— Dan Tao

4

Funziona solo con altri file SCSS? Non puoi farlo con i file CSS?

— schiacciare il

1

Fare attenzione quando si utilizza @extendinsieme a bootstrap / qualsiasi framework, poiché potrebbe non funzionare come previsto. Ci sono alcune cose di cui essere consapevoli come indicato in questo post: stackoverflow.com/questions/30744625/…

— Patrik Affentranger

2

Ma questo non duplica il CSS da bootstrap.scss, se lo fai in più file nel tuo progetto?

— fritzmg

1

Questo importa l'intero bootstrap.cssin styles.csso solo .btn? Voglio dire nel pacchetto di output? Se importa per intero bootstrap.css, aumenterà la dimensione di styles.cssinutilmente.

— maverick

8

** Potrei sbagliarmi, ma se ottengo quello che stai cercando di fare, non puoi semplicemente usare il @extend .classname;comando all'interno dell'elemento che vorresti estendere? Naturalmente, dovresti modificare solo il tuo codice per preservare l'aggiornamento.

— Mark Ernst
fonte

2

Per quanto ne so, devi utilizzare@import il file contenente le classi che desideri utilizzare nel tuo file SASS per poterle utilizzare in quel file. Tuttavia, non sono un esperto SASS / SCSS, quindi qualcuno potrebbe conoscere un altro modo per usarli a distanza di cui non sono a conoscenza.

— SCOTTS
fonte

1

Proprio come la risposta accettata ha dimostrato che questo è possibile con @import, tuttavia @import è stato deprecato da sass

Il team Sass scoraggia l'uso continuato della regola @import. Sass lo eliminerà gradualmente nei prossimi anni e alla fine lo rimuoverà completamente dalla lingua. Preferisci invece la regola @use.

La regola @use è più adatta per l'uso ora, poiché non inquina l'ambito del modulo di importazione (utente). sfortunatamente al momento della scrittura la regola di utilizzo è implementata solo in Dart sass.

— Ehab
fonte