CSS-redondance lors de l'utilisation MOINS et son @import

Question

Je aime vraiment l'idée et le concept de MOINS . Pourtant, je suis tombé sur un bug, qui je l'ai signalé il y a un certain temps à l'auteur, mais n'a pas encore obtenir des commentaires. Peut-être juste moi qui est en train de faire quelque chose de mal.

Mon application.less-fichier qui ressemble à ceci:

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

J'aime qu'il est possible d'utiliser la règle de @import de diviser mes fichiers pour obtenir une meilleure vue d'ensemble de mes déclarations-css. Pourtant, chaque fichier importé doit réimporter le fichier config.less- nouveau pour pouvoir utiliser les mixins et les variables i définies là-dedans.

Je parie que vous savez déjà quel genre de redondance que je conduis à:. Chaque fois que le config.less est importé, sa « sortie » devient une partie du application.css

Ma config fichier contient environ 200 lignes de code. Depuis que je partagerai mon CSS dans environ 5 fichiers (basé sur mon nom de contrôleur) qui doivent réimporter la config, je finis par avoir environ 1000 lignes de code CSS généré qui sont redondants 100%.

Seule solution que je peux trouver est de ne pas séparer mes fichiers, ce que j'aime vraiment éviter.

Answer 1

Bien que pas idéal, la raison pratique est que les fichiers que vous importez théoriquement ne doivent pas contenir de CSS. En règle générale, vous avez des variables et mixins dynamiques, qui ne contribuent pas à votre sortie CSS:

lib.less:

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

main.less:

@import "lib";

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

sortie, main.css:

a { color: #0011ff; }

#colors {} and .button ne sortira pas dans ce cas.

Answer 2

MOINS soutient maintenant @import-once "stylename.less";

Answer 3

Peut-être que vous pouvez les diviser dans votre environnement de développement, puis de les fusionner ensemble, ne pas avoir besoin de tout le code supplémentaire, lorsque vous déployez sur votre serveur web en direct?

Answer 4

Vous pouvez utiliser mixins dynamique dans votre fichier de configuration MOINS si elles sont déclarées et mixtes à l'aide $ au lieu de ..

En config.less:

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

En header.less:

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

Source . J'ai aussi essayé cela et il fonctionne.