MENO @import & Web Essentials 2012

Question

Nel mio progetto web ho diviso il mio CSS in file LESS separati per ragioni di manutenzione. Ho un file chiamato config.less che agisce come un file master che importa gli altri file in meno, usando le direttive @import.

Il problema con questa configurazione sembra essere che ho un sacco di "variabile non dichiarata" & "mixin sommerso" mentre si modifica i file di meno, ad esempio, mentre l'aggiunta di una variabile di proprietà chiamata @textColor in base.less, che è dichiarato in un altro file meno chiamato variables.less. Esiste un modo per rendere gli elementi essenziali del Web consapevoli delle variabili e dei mixin definiti in meno file esterni?

Un'altra cosa che sembra essere inciampare Essentials web è quando sto usando la funzione di media query nidificate di LESS:

.some-selector { 
    background: #000; 
    @media only screen and (max-width: 800px) { 
     background: #fff; 
    } 
} 

La dichiarazione @media annidata ottiene una sottolineatura rossa, e al passaggio del mouse si dice "Unexpected '@' block nella regola di stile". Passando il mouse sulla proprietà nidificata dello sfondo viene visualizzato "Convalida: 'color' non è un tag HTML valido

Answer 1

Non riesco a dare una risposta in merito al problema @media con Web Essentials, ma posso dare consigli sul problema delle variabili e dei mixin.

Fondamentalmente, modificare il file config.less per avere la variables.less e qualsiasi altro file mixin essere @import-once, quindi anche aggiungere @import-once 'variables.less in ogni file che utilizza variabili da esso (fare lo stesso per tutti i file mixin utilizzati).

Quello che fa è importare il file se ci stai lavorando (come il tuo base.less), ma quando tutti i file sono compilati da config.less, importa una sola volta lo variables.less e non ancora per ogni file che fa riferimento anche allo variables.less.