CSS-ridondanza quando usando meno e la sua @import

Question

Mi piace molto l'idea e il concetto di MENO . Eppure, sono incappato in un bug, che ho riferito parecchio tempo fa l'autore, ma non ho ancora capito tutte le risposte. Forse è solo a me che sta facendo qualcosa di sbagliato.

Il mio application.less-File, che è simile a questo:

@import "reset";
@import "config";
@import "header";
@import "forms";
[…]

Mi piace che sia possibile utilizzare la regola @import di dividere i file per ottenere una migliore visione d'insieme i miei CSS-dichiarazioni. Eppure ogni file importato deve reimportare il config.less-File nuovo per essere in grado di fare uso dei mixin e le variabili che ho definito in là.

Scommetto che già si conosce che tipo di ridondanza voglio arrivare:. Ogni volta che il config.less viene importato, la sua "uscita" entra a far parte del application.css

Il mio config-file contiene circa 200 righe di codice. Dal momento che ho diviso il mio CSS-in circa 5 file (in base alla mia nomi di controller) che hanno bisogno di reimportare il config, io alla fine con circa 1000 linee di codice generato CSS-ridondanti al 100%.

L'unica soluzione che posso dare è di non dividere i miei file, quello che mi piace davvero evitare.

Answer 1

Anche se non è l'ideale, la ragione pratica di questo è che i file importati in teoria non hanno bisogno di contenere i CSS. In genere, si avrebbe variabili e mixins dinamiche, che non contribuiscono alla vostra uscita CSS:

lib.less:

#colors {
    @blue: #0011ff;
    @red: #ee2222;
}
.button (@width: 10px) {...}

main.less:

@import "lib";

a { color: #colors[@blue]; }

uscita, main.css:

a { color: #0011ff; }

#colors {} and .button non sarà in uscita in questo caso.

Answer 2

MENO ora supporta @import-once "stylename.less";

Answer 3

Forse si può dividerle nel vostro ambiente di sviluppo e poi fonderli insieme, non avendo bisogno di tutto il codice in più, quando si distribuisce al server Web dal vivo?

Answer 4

È possibile utilizzare mixins dinamici nel file di configurazione di meno se sono dichiarate e mixed-in utilizzando $ invece di ..

In config.less:

$mixin
{
  a { color: @light; }
  h2 { //etc.
}

In header.less:

@import "config";
.header
{
  $mixin;
}

Fonte . Ho anche provato questo e funziona.