Come @extend da un altro file sass, o come ottenere OOSASS?

Question

La mia domanda è in realtà più ampia di quanto dice il titolo. Questo è proprio il punto in cui mi trovo in difficoltà con la mia idea, ma sono aperto a ogni tipo di soluzione. Lasciami spiegare il mio obiettivo generale.

Mi piace ciò che i preprocessori CSS possono fare. Mi piacciono le idee di OOCSS e SMACSS. Sono nuovo di tutto questo. Sto cercando di aggiornare i miei metodi di progettazione per incorporare in qualche modo il meglio di tutti i mondi. Ho un metodo teorico che funziona in questo modo:

• utilizzare solo i nomi di classe semantica o id o qualsiasi altra cosa
• definiscono moduli o modelli in qualche foglio di stile comune
• hanno per i fogli di stile di pagina che @extend moduli dal foglio di stile comune sui selettori semantici relativi a una determinata pagina

Quindi questo:

/* modules.scss */ 
.ruddy {color: red} 
.fullwidth {width: 100%; display: block;} 

.210

oltre a questo:

/* homepage.scss */ 
@import modules.sass 

#intro {@extend ruddy; @extend fullwidth} 
aside {@extend ruddy;} 
.thing {@extend fullwidth;} 

diventa questo: nessuno

/* homepage.css */ 
#intro, aside {color: red} 
#intro, .thing {width: 100%; display: block;} 

Non ho necessariamente visto altro fare questo, ma c'è sembrata una buona idea per me. Il problema che sto incontrando nel mio grande schema è che @extend non sembra funzionare da un file importato. Qualcuno da qualche parte su SO ha detto che non è possibile. È vero? Ho avuto mixin per funzionare, ma il problema con loro è che duplicano ogni attributo nel css di output, che non sembra ideale.

In realtà sono più parziale di MENO (sintassi), ma al momento non si è nemmeno estesa. Non dovrei preoccuparmi delle inefficienze dei mixin o c'è un modo per ottenere ciò che sto chiedendo?

Nota: Sto compilando automaticamente il mio sass con uno strumento chiamato Prepros. Quando provo a compilare codice come sopra, ho un errore come.

AVVISO sulla riga 11 di ... \ sass \ home.scss: "#intro" non è riuscito su @extend "ruddy". Il selettore "ruddy" non è stato trovato.

Se copio il codice da module.scss in homepage.scss, il problema scompare.

Answer 1

Il problema è qui:

#intro {@extend ruddy; @extend fullwidth} 
aside {@extend ruddy;} 
.thing {@extend fullwidth;} 

ruddy e fullwidth non sono selettori. Se stai estendendo la classe .ruddy, devi includere il periodo, poiché è parte del selettore.

#intro {@extend .ruddy; @extend .fullwidth} 
aside {@extend .ruddy;} 
.thing {@extend .fullwidth;} 

Answer 2

Non è vero.

È possibile dichiarare classi (incluso lo %-prefixed ones) in un file, importare il primo file nel secondo file ed estendere le classi nel secondo file.

Esempio:

foo.sass

%foo 
    color: red 

bar.sass

@import foo.sass 
html 
    @extend %foo 

Run sass bar.sass bar.css.

bar.css appare

html { 
    color: red; } 

PS Per vera esperienza SASS, si dovrebbe sfruttare Compass. Compass è un mucchio di cose con un solo nome:

• un pratico strumento per compilare SASS in modo efficiente;
• una vasta libreria di pratici stili SASS per tutte le occasioni;
• un ecosistema di estensioni che è possibile installare e utilizzare nei progetti senza sforzo. Questo è ciò che distingue la SASS. Non è necessario reinventare la ruota più e più volte.

UPD all'errore Infine testo!

Ti manca il punto nel nome della classe. aside {@extend ruddy;} dovrebbe essere aside {@extend .ruddy;}.