Sass che importa senza compilare

In sass, il modo in cui si importa è utilizzando il comando di importazione. Userò ZURB Fondazione a titolo di esempio:Sass che importa senza compilare

@import "foundation";

Questo sarà quindi importare l'intero file foundation.scss e tutte le sue importazioni relative alla parte superiore del file corrente. Ciò significa che l'intero file foundation.scss verrà compilato ed emesso insieme al contenuto del file nel file finale <name here>.css.

Sebbene ciò sia utile per la personalizzazione, ad esempio colori e spaziatura personalizzati, diventa un problema quando si creano librerie e si distribuiscono queste librerie come singoli droplet che altre persone possono inserire nei propri progetti esistenti.

C'è un modo per importare i file come "riferimenti", in modo che mixins e altre variabili diventino disponibili nell'ambito del file corrente, ma le altre istruzioni CSS vengono ignorate? Il preprocessore LESS css ha un tag di importazione appena implementato simile a questo (appropriatamente chiamato reference).

fonte

2013-11-25 user3030670

creare un file secondario come '_subfile.scss' lì scrivere il codice e importarlo nel file principale. Facile da mantenere. –

@VivekVikranth Come farei allora a confezionarlo per il rilascio (per gli utenti finali)? – user3030670

possibile duplicato di [importazione parziale Sass] (http://stackoverflow.com/questions/14122316/sass-partition-importing) – cimmanon

Dando uno sguardo al Foundation dimostra un buon approccio a questo:

https://github.com/zurb/bower-foundation/blob/master/scss/foundation/components/_breadcrumbs.scss

Qui ne hanno uno @import "global"; nella parte superiore del file.

che è seguita da un gruppo di mixins

In fondo hanno:

@include exports("breadcrumbs") { 
    @if $include-html-nav-classes { 
    .breadcrumbs { 
     @include crumb-container; 
     @include radius($crumb-radius); 

     &>* { 
     @include crumbs; 
     } 
    } 
    } 
}

Il $include-html-nav-classes è impostata su true per impostazione predefinita nel file _global.scss. Può essere sovrascritto in qualsiasi altro file cambiandolo in falso. Questo ti permette di usare entrambi i mix e generare html.

Se non è necessario generare alcun css, includere solo mixins e semplifica la situazione. Credo che lo facciano per consentire una rapida personalizzazione e ottimizzazione dei css emessi.

fonte

2013-11-25 21:29:37 JAMESSTONEco

In realtà, il metodo Foundation è * terribile * e non deve essere imitato. Nessuno consiglia di creare le librerie CSS in questo modo, perché non è più complicato di quanto dovrebbe essere. Il codice che emette CSS dovrebbe essere separato da elementi come mixin, variabili, ecc. – cimmanon

Trovare * qualsiasi * L'estensione Compass è un'attività molto difficile in questo momento. La maggior parte delle estensioni che si possono trovare sono puramente * in stile building block * (cioè includono solo variabili, funzioni e mixin: pulsanti sassy, scale modulari, ecc.). Le estensioni come le reimpostazioni e le normalizzazioni sono di gran lunga meno comuni. Foundation e Bootstrap sono le uniche estensioni che sono stato in grado di trovare sia il pacchetto CSS * che * i loro elementi costitutivi insieme senza separazione. – cimmanon

Questa è una buona domanda e sono d'accordo sul fatto che il metodo Foundation in questa risposta sia un odore di codice. Idealmente, il linguaggio Sass avrebbe una speciale direttiva di importazione (ad esempio "@importReference") in modo che si possa importare un file senza che esso stia scrivendo il CSS. Ciò sarebbe utile (e intuitivo) negli scenari della pagina principale in cui la pagina principale collega un Global.file CSS, quindi le pagine figlio si collegano a file CSS specifici per i bambini che potrebbero utilizzare riferimenti dal file CSS della pagina principale (potrebbe avere senso se Global.css è più grande e deve essere memorizzato nella cache su più pagine anziché combinare in un singolo file CSS) . –

risposta

Problemi correlati