Wie kann ich Foundation globale Variablen für alle meine scss-Dateien in einer Schiene app

Question

Ich frage mich, wie ich die Farbvariablen (z. B. $ hellgrau) über alle meine scss (ich verwende Foundation 6).

dachte ich *= require foundation_and_overrides an der Spitze meiner application.scss verwenden würden alle Variablen zur Verfügung accross alle SCSS-Dateien machen, aber ich bekomme die follwing Fehler Undefined variable: "$light-gray".

Vielen Dank für Ihre Hilfe.

Answer 1

Ich weiß nicht, ob dies die beste Praxis ist. Aber ich mache es so, dass ich eine andere SCSS Datei shared_variables.scss

// shared_variables.scss 
$light-gray: #ccc; 

Dann innen foundation_and_overrides.scss, ich importiere es genannt haben (wenn Sie eine Variable in dieser Datei verwenden werden):

// foundation_and_overrides.scss 

// ... 
@import 'foundation-functions'; 
@import 'shared_variables'; // Add this line 
// ... 

Dann importieren Sie das auch für andere .scss Datei, die von den globalen Variablen abhängt;

Answer 2

Grundsätzlich können wir @import nicht verwenden, um eine Variable global zu erstellen. Dies ist der Grund:

Sass/Sass wird die Datei übernehmen, die Sie importieren möchten, und kombinieren es mit der Datei in die Sie importieren, so können Sie eine einzelne CSS-Datei zum Web-Browser dienen.

prüfen this für weitere Einzelheiten

Angenommen, Sie haben ein paar SCSS Dateien haben, _reset.scss und base.scss. Wir möchten _reset.scss in base.scss importieren.

_reset.scss

html, 
body, 
ul, 
ol { 
    margin: 0; 
    padding: 0; 
} 

base.scss

@import 'reset'; 

body { 
    font: 100% Helvetica, sans-serif; 
    background-color: #efefef; 
} 

Die base.scss wird base.css wie folgt generiert werden:

base.css

html, body, ul, ol { 
    margin: 0; 
    padding: 0; 
} 

body { 
    font: 100% Helvetica, sans-serif; 
    background-color: #efefef; 
} 

So import Werke wie reset Inhalt in die Position zu ersetzen reset in base importieren!