CSS-Redundanz bei der Verwendung von LESS und seinen @import

StackOverflow https://stackoverflow.com/questions/2132138

  •  22-09-2019
  •  | 
  •  

Frage

Ich mag die Idee und das Konzept der WENIGER . Doch stieß ich auf einen Fehler, den ich vor einiger Zeit ganz an den Autor berichtet aber noch nicht über jedes Feedback bekommen. Vielleicht ist es nur mich, der etwas falsch macht.

Meine application.less-File, das aussieht wie folgt aus: 

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

Ich mag, dass es möglich ist, die @import Regel zu verwenden, um meine Dateien aufzuspalten einen besseren Überblick über meine CSS-Deklarationen zu gewinnen. Doch alle importierte Datei muss Re-Import die config.less-Datei wieder in die Lage seines Einsatz des Mixins zu machen und Variablen i in dort definiert.

Ich wette, Sie bereits wissen, welche Art von Redundanz bei Ich fahre: Jedesmal, wenn das config.less importiert wird, seine „Ausgang“ Teil des application.css wird

.

Meine config-Datei enthält etwa 200 Zeilen Code. Da ich meine CSS-in aufspalten etwa 5 Dateien (basierend auf meinem Controller-Namen), die Notwendigkeit der Re-Import der Config, beende ich über 1000 Zeilen erzeugt CSS-Code einfach mit bis zu 100% redundant sind.

einzige Lösung, die ich mit oben kommen kann nicht meine Dateien aufzuspalten, was ich wirklich wie zu vermeiden.

War es hilfreich?

Lösung

Obwohl es nicht ideal, der praktische Grund dafür ist, dass die Dateien, die Sie theoretisch importieren keine CSS enthalten müssen. Normalerweise würden Sie Variablen und dynamische Mixins haben, die auf Ihre CSS Ausgabe nicht beitragen:

lib.less: 

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

main.less: 

@import "lib";

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

Ausgang, main.css: 

a { color: #0011ff; }

#colors {} and .button wird nicht ausgegeben in diesem Fall sein.

Andere Tipps

LESS unterstützt jetzt @import-once "stylename.less";

Vielleicht können Sie sie in Ihrer Entwicklungsumgebung aufgeteilt und sie dann miteinander verschmelzen, nicht alle zusätzlichen Code benötigen, wenn Sie Ihren Live-Web-Server bereitstellen?

Sie können die dynamische Mixins in Ihrer Datei WENIGER Config verwenden, wenn sie und Mixed-in mit $ statt . deklariert ist.

In config.less: 

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

In header.less: 

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

Quelle . Ich habe dies auch versucht, und es funktioniert.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top