SASS - Verwenden Sie Variablen für mehrere Dateien

Ich möchte eine zentrale .scss-Datei behalten, in der alle SASS-Variablendefinitionen für ein Projekt gespeichert sind.

// _master.scss 

$accent: #6D87A7;           
$error: #811702;
$warning: #F9E055;
$valid: #038144;
// etc... 

Das Projekt wird aufgrund seiner Natur eine große Anzahl von CSS-Dateien enthalten. Es ist wichtig, dass ich alle projektweiten Stilvariablen an einem Ort deklariere.

Gibt es eine Möglichkeit, dies in SCSS zu tun?

Sie können es so machen:

Ich habe einen Ordner mit dem Namen utilities und darin eine Datei mit dem Namen _variables.scss

In dieser Datei deklariere ich Variablen wie folgt:

$black: #000;
$white: #fff;

dann habe ich die style.scss Datei, in die ich alle meine anderen scss Dateien wie folgt importiere:

// Utilities
@import "utilities/variables";

// Base Rules
@import "base/normalize";
@import "base/global";

Dann sollte ich in einer der von mir importierten Dateien auf die von mir deklarierten Variablen zugreifen können.

Stellen Sie einfach sicher, dass Sie die Variablendatei vor allen anderen importieren, in denen Sie sie verwenden möchten.

Diese Antwort zeigt, wie ich dies genutzt habe und welche zusätzlichen Fallstricke ich hatte.

Ich habe eine Master-SCSS-Datei erstellt. Diese Datei muss am Anfang einen Unterstrich haben, damit sie importiert werden kann:

// assets/_master.scss 
$accent: #6D87A7;           
$error: #811702;

Dann importiere ich im Header aller meiner anderen .SCSS-Dateien den Master:

// When importing the master, you leave out the underscore, and it
// will look for a file with the underscore. This prevents the SCSS
// compiler from generating a CSS file from it.
@import "assets/master";

// Then do the rest of my CSS afterwards:
.text { color: $accent; }

WICHTIG

Nehmen Sie nur Variablen, Funktionsdeklarationen und andere SASS-Funktionen in Ihre _master.scssDatei auf. Wenn Sie tatsächliches CSS einschließen, wird dieses CSS in jeder Datei dupliziert, in die Sie den Master importieren.

Diese Frage wurde vor langer Zeit gestellt, daher dachte ich, ich würde eine aktualisierte Antwort veröffentlichen.

Sie sollten jetzt vermeiden, zu verwenden @import. Entnommen aus den Dokumenten:

Sass wird es in den nächsten Jahren schrittweise auslaufen lassen und es schließlich vollständig aus der Sprache entfernen. Bevorzugen Sie stattdessen die @ use-Regel.

Eine vollständige Liste der Gründe finden Sie hier

Sie sollten jetzt @usewie folgt verwenden:

_variables.scss

$text-colour: #262626;

_otherFile.scss

@use 'variables'; // Path to _variables.scss Notice how we don't include the underscore or file extension

body {
  // namespace.$variable-name
  // namespace is just the last component of its URL without a file extension
  color: variables.$text-colour;
}

Sie können auch einen Alias ​​für den Namespace erstellen:

_otherFile.scss

@use 'variables' as v;

body {
  // alias.$variable-name
  color: v.$text-colour;
}

Erstellen Sie eine index.scss und dort können Sie alle vorhandenen Dateistrukturen importieren. Ich werde Ihnen meinen Index aus einem Unternehmensprojekt einfügen, vielleicht hilft es anderen, wie man Dateien in CSS strukturiert:

@import 'base/_reset';

@import 'helpers/_variables';
@import 'helpers/_mixins';
@import 'helpers/_functions';
@import 'helpers/_helpers';
@import 'helpers/_placeholders';

@import 'base/_typography';

@import 'pages/_versions';
@import 'pages/_recording';
@import 'pages/_lists';
@import 'pages/_global';

@import 'forms/_buttons';
@import 'forms/_inputs';
@import 'forms/_validators';
@import 'forms/_fieldsets';

@import 'sections/_header';
@import 'sections/_navigation';
@import 'sections/_sidebar-a';
@import 'sections/_sidebar-b';
@import 'sections/_footer';

@import 'vendors/_ui-grid';

@import 'components/_modals';
@import 'components/_tooltip';
@import 'components/_tables';
@import 'components/_datepickers';

Und Sie können sie mit Schluck / Grunzen / Webpack usw. ansehen, wie:

gulpfile.js

// SASS Aufgabe

var gulp = require('gulp');
var sass = require('gulp-sass');
//var concat = require('gulp-concat');
var uglifycss = require('gulp-uglifycss');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('styles', function(){
    return gulp
            .src('sass/**/*.scss')
            .pipe(sourcemaps.init())
            .pipe(sass().on('error', sass.logError))
            .pipe(concat('styles.css'))
            .pipe(uglifycss({
                "maxLineLen": 80,
                "uglyComments": true
            }))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('./build/css/'));
});

gulp.task('watch', function () {
    gulp.watch('sass/**/*.scss', ['styles']);
});

gulp.task('default', ['watch']);

Wie wäre es, wenn Sie eine farbbasierte Klasse in eine globale Sass-Datei schreiben, sodass wir uns nicht darum kümmern müssen, wo sich Variablen befinden. Genau wie folgt:

// base.scss 
@import "./_variables.scss";

.background-color{
    background: $bg-color;
}

und dann können wir die background-colorKlasse in jeder Datei verwenden. Mein Punkt ist, dass ich variable.scsskeine Datei importieren muss, sondern nur verwenden muss.