SASS: utilizza le variabili su più file

Vorrei mantenere un file .scss centrale che memorizza tutte le definizioni delle variabili SASS per un progetto.

// _master.scss 

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

Il progetto avrà un gran numero di file CSS, per la sua natura. È importante dichiarare tutte le variabili di stile a livello di progetto in un'unica posizione.

C'è un modo per farlo in SCSS?

Puoi farlo in questo modo:

Ho una cartella chiamata utilities e al suo interno ho un file chiamato _variables.scss

in quel file dichiaro le variabili in questo modo:

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

quindi ho il file style.scss in cui importare tutti gli altri miei file scss in questo modo:

// Utilities
@import "utilities/variables";

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

quindi, all'interno di uno qualsiasi dei file che ho importato, dovrei essere in grado di accedere alle variabili che ho dichiarato.

Assicurati solo di importare il file variabile prima di tutti gli altri in cui desideri utilizzarlo.

Questa risposta mostra come ho finito per usare questo e le insidie ​​aggiuntive che ho colpito.

Ho creato un file SCSS master. Questo file deve avere un carattere di sottolineatura all'inizio per poter essere importato:

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

Quindi, nell'intestazione di tutti i miei altri file .SCSS, importare il 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; }

IMPORTANTE

Non includere altro che variabili, dichiarazioni di funzioni e altre funzionalità SASS nel _master.scssfile. Se includi CSS reali, questo duplicherà questi CSS su tutti i file in cui importi il ​​master.

Questa domanda è stata posta molto tempo fa, quindi ho pensato di pubblicare una risposta aggiornata.

Ora dovresti evitare di usare @import. Tratto dai documenti:

Sass lo eliminerà gradualmente nei prossimi anni e alla fine lo rimuoverà completamente dalla lingua. Preferisci invece la regola @use.

Un elenco completo dei motivi può essere trovato qui

Ora dovresti usare @usecome mostrato di seguito:

_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;
}

Puoi anche creare un alias per lo spazio dei nomi:

_otherFile.scss

@use 'variables' as v;

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

Crea un index.scss e lì puoi importare tutta la struttura dei file che hai. Ti incollerò il mio indice da un progetto aziendale, forse aiuterà altri come strutturare i file in CSS:

@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';

E puoi guardarli con gulp / grunt / webpack ecc., Come:

gulpfile.js

// Task SASS

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']);

Che ne dite di scrivere una classe basata sul colore in un file sass globale, quindi non dobbiamo preoccuparci di dove siano le variabili. Proprio come il seguente:

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

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

e quindi, possiamo usare la background-colorclasse in qualsiasi file. Il mio punto è che non ho bisogno di importare variable.scssin nessun file, basta usarlo.