SASS - utiliser des variables sur plusieurs fichiers

Je voudrais conserver un fichier .scss central qui stocke toutes les définitions de variables SASS pour un projet.

// _master.scss 

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

Le projet comportera un grand nombre de fichiers CSS, en raison de sa nature. Il est important que je déclare toutes les variables de style à l'échelle du projet en un seul endroit.

Existe-t-il un moyen de le faire dans SCSS?

Vous pouvez le faire comme ceci:

J'ai un dossier nommé utilitaires et à l'intérieur de celui-ci j'ai un fichier nommé _variables.scss

dans ce fichier, je déclare des variables comme ceci:

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

alors j'ai le fichier style.scss dans lequel j'importe tous mes autres fichiers scss comme ceci:

// Utilities
@import "utilities/variables";

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

puis, dans n'importe lequel des fichiers que j'ai importés, je devrais pouvoir accéder aux variables que j'ai déclarées.

Assurez-vous simplement d'importer le fichier variable avant tout autre fichier dans lequel vous souhaitez l'utiliser.

Cette réponse montre comment j'ai fini par l'utiliser et les pièges supplémentaires que j'ai rencontrés.

J'ai créé un fichier SCSS maître. Ce fichier doit avoir un trait de soulignement au début pour pouvoir être importé:

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

Ensuite, dans l'en-tête de tous mes autres fichiers .SCSS, j'importe le maître:

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

IMPORTANT

N'incluez rien d'autre que des variables, des déclarations de fonctions et d'autres fonctionnalités SASS dans votre _master.scssfichier. Si vous incluez du CSS réel, il dupliquera ce CSS dans chaque fichier dans lequel vous importez le maître.

Cette question a été posée il y a longtemps, j'ai donc pensé publier une réponse mise à jour.

Vous devez maintenant éviter d' utiliser @import. Tiré des documents:

Sass le supprimera progressivement au cours des prochaines années et le supprimera finalement complètement de la langue. Préférez plutôt la règle @use.

Une liste complète des raisons peut être trouvée ici

Vous devez maintenant utiliser @use comme indiqué ci-dessous:

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

Vous pouvez également créer un alias pour l'espace de noms:

_otherFile.scss

@use 'variables' as v;

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

Créez un index.scss et vous pourrez y importer toute la structure de fichiers dont vous disposez. Je vais vous coller mon index à partir d'un projet d'entreprise, peut-être que cela aidera d'autres comment structurer des fichiers en 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';

Et vous pouvez les regarder avec gulp / grunt / webpack etc., comme:

gulpfile.js

// Tâche 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']);

Que diriez-vous d'écrire une classe basée sur les couleurs dans un fichier sass global, nous n'avons donc pas besoin de nous soucier de l'emplacement des variables. Tout comme ce qui suit:

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

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

puis, nous pouvons utiliser la background-colorclasse dans n'importe quel fichier. Mon point est que je n'ai pas besoin d'importer variable.scssdans n'importe quel fichier, il suffit de l'utiliser.