Wie vermeidet man mehrere @ Imports von SASS-Variablen?

Die Site, an der ich gerade arbeite, verwendet die Rails-Asset-Pipeline und eine application.scss-Datei, um verschiedene CSS-Dateien zu importieren und zu verarbeiten.Wie vermeidet man mehrere @ Imports von SASS-Variablen?

Einige Stylesheets werden jedoch an bestimmten Stellen verwendet, und für diese macht es wenig Sinn, sie in das globale Manifest zu importieren. Aber nicht importiert importieren Variablen.scss, und möglicherweise mixins.scss in das Blatt selbst (damit sie korrekt verarbeitet werden), was zu doppelten Code in der endgültigen css.

Gibt es eine Möglichkeit, den Präprozessor grundsätzlich zu informieren - "Vertrauen Sie mir, die Variable/Mixin, die Sie sehen wird definiert werden, bis alles verarbeitet wird"?

Sonst sehe ich nicht ho zu vermeiden, jedes Blatt in ein einziges Manifest zu importieren, das aufgebläht scheint.

Danke.

Quelle

2015-06-28 Gabe Friedman

Mögliche Duplikate: http://stackoverflow.com/questions/17976140/false-positive-undefined-variable-error-when-compiling-scss, http: // Stackoverflow.com/questions/18408324/how-can-one-import-only-variables-und-mixins-from-scss-stylehsheets, http://stackoverflow.com/questions/24182734/how-to-vermeiden-duplikation-von- styles-in-scss – cimmanon

ich bin nicht ganz sicher, dass ich das bekomme, wenn du dateien hast, die nur mixins und variables enthalten, solltest du sie so oft wie du willst ohne aufblasen? Keine Sache führt zu kompilierten css –

So verwenden z. @ Import "/ Mixins"; am Anfang einer CSS-Datei führt nicht mehr kompilierten Code als nicht mit dem Import? Also erlaubt es einfach die CSS kompiliert zu werden? Wenn ja. Großartig und danke! –

Die kurze Antwort auf Ihre Frage ist nein. Die Variablen müssen in einer logischen Reihenfolge definiert werden, wenn sie beim Kompilieren aufgerufen werden. Es ist wie ein "Huhn und das Ei" -Szenario.

Aus dem, was ich in Ihrer Beschreibung feststellen kann, kompiliert das Projekt, an dem Sie arbeiten, nicht zu einem einheitlichen Arbeitsablauf, sondern zerfällt in modulare Teile, die relational zu Ihrer Dateistruktur sind. Wenn dies der Fall ist, können Sie am Anfang jeder Datei auf die Variablendatei von der Wurzel aus zugreifen.

In einem normalen Workflow, würden Sie Ihre SCSS Dateien anhand Ihrer Hierarchie importieren wie folgt:

sass/style.scss

/* Main Stylesheet */ 

@import "variables"; 
@import "mixins"; 

/* Modular Sections */ 
@import "layout/header"; 
@import "layout/body"; 
@import "layout/footer";

einem Sheet kompilieren aus style.css mit einem würde Befehl sass sass/style.scss:style.css

Was ich von Ihrem Projekt annahm, ist, dass alle /* Modular Sections */ Dateien in ihre eigenen CSS-Dateien kompiliert werden.

Layout/header.scss

/* Header Stylesheet */ 
@import "../variables"; 
@import "../mixins";

eine Datei Struktur gegeben, das ähnelt:

/root 

    style.scss 
    variables.scss 
    mixins.scss 

    /layouts 

    header.scss 
    body.scss 
    footer.scss

Das alles scheint allerdings ein bisschen albern. Ich kenne nicht alle Parameter, die in deine aktuelle Sass-Compilation eingehen, aber ich würde einen einheitlichen Workflow empfehlen.

Quelle

2015-08-04 16:31:58 Plummer

können Sie Partials verwenden, so dass der Compiler Variablen nicht versuchen, usw.

Grundsätzlich zu interpretieren, benennen Sie die Dateien, die Sie der Compiler nicht wollen tun zu interpretieren - aber wird sein, wenn kompiliert verfügbar - - mit einem Unterstrich vor dem Dateinamen.

zB. _filename.scss

Quelle

2015-12-03 11:23:06

Wie vermeidet man mehrere @ Imports von SASS-Variablen?

Antwort

Verwandte Themen