Die Art, wie man importiert, ist der Import-Befehl. Ich werde die Zurb-Stiftung als Beispiel verwenden:
%Vor% Dies wird dann die gesamte foundation.scss -Datei und alle ihre relativen Importe an den Anfang der aktuellen Datei importieren. Dies bedeutet, dass die gesamte foundation.scss -Datei kompiliert und zusammen mit dem Inhalt der Datei in die endgültige <name here>.css -Datei ausgegeben wird.
Obwohl dies für die Anpassung nützlich ist, z. B. benutzerdefinierte Farben und Abstände, wird es beim Erstellen von Bibliotheken und beim Verteilen dieser Bibliotheken als einzelne Droplets für andere Personen problematisch, sich in ihre bestehenden Projekte einzufügen.
Gibt es eine Möglichkeit, Dateien als "Referenzen" zu importieren, so dass mixins und andere Variablen im Bereich der aktuellen Datei verfügbar sind, aber andere CSS-Anweisungen ignoriert werden? Der LESS-css-Präprozessor hat ein neu implementiertes Import-Tag, das diesem ähnlich ist (entsprechend benannt als reference ).
Ein Blick auf die Stiftung zeigt einen guten Ansatz dazu:
Hier haben sie einen @import "global"; am Anfang der Datei.
Darauf folgt eine Reihe von Mixins
Am Ende haben sie:
%Vor%% ce_de% wird standardmäßig in der _global.scss-Datei auf true gesetzt. Es kann in jeder anderen Datei außer Kraft gesetzt werden, indem es in false geändert wird. Dies ermöglicht Ihnen, die Mixins zu verwenden und HTML zu generieren.
Wenn Sie keine CSS generieren müssen, nehmen Sie nur Mixins und es wird Ihre Situation vereinfachen. Ich glaube, dass sie dies tun, um eine schnelle Anpassung und Optimierung der ausgegebenen CSS zu ermöglichen.
Tags und Links compilation css reference sass zurb-foundation