SASS - utiliser des variables sur plusieurs fichiers


217

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?


Je suis presque sûr que ce n'est pas possible, j'ai essayé la même chose il y a un moment et je n'ai pas pu le faire fonctionner.
DrCord

8
@DrCord, au contraire, c'est une caractéristique centrale de SASS: sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials
Ennui

Doux! Je pense que j'ai peut-être mal lu cette déclaration: "Les directives qui ne sont autorisées qu'au niveau de base d'un document, comme mixin ou charset, ne sont pas autorisées dans les fichiers qui sont importés dans un contexte imbriqué." et ne pas lire correctement la partie "contexte imbriqué".
DrCord

Réponses:


325

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.


4
Parfait. Juste ce que je voulais dire et ce dont j'avais besoin. Dernière question: tous les fichiers importés devraient-ils commencer par un trait de soulignement? Vous soulignez le nom de votre fichier, mais échouez dans les déclarations @import.
dthree

46
ces fichiers sont considérés comme des fichiers partiels et les noms doivent commencer par des traits de soulignement, vous les laissez cependant lors de l'importation. il y a un très bon article qui explique pourquoi ici: alistapart.com/article/getting-started-with-sass
Joel

7
Notez que vous pouvez déclarer par défaut dans vos modules: $black: #000 !default;. Le !defaulttruc empêche la réinitialisation de la variable si elle existe déjà.
Andrey Mikhaylov - lolmaus

2
Pourquoi devons-nous vider toutes les variables dans un seul fichier? Ne pouvons-nous pas les diviser et les déposer dans le fichier correspondant qui en a besoin? Par exemple, les variables nécessaires à la boîte de dialogue modale ne peuvent-elles pas être placées dans _modal.scss?
VJAI

3
Cette réponse n'est plus le moyen recommandé de réutiliser des variables dans plusieurs fichiers. Veuillez consulter stackoverflow.com/a/61500282/7513192
whiscode

82

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.


5
Merci beaucoup pour votre commentaire sur le fichier devant commencer par un trait de soulignement! Je viens de passer environ 3 heures à essayer de comprendre pourquoi il me manquait un tas de styles de Fondation. Changement du nom de fichier de mon fichier de paramètres Foundation pour commencer avec un trait de soulignement et bonjour! Mais maintenant, quand je change à nouveau le nom de fichier, ça fonctionne toujours? Qu'est-ce que ...? Oh bien ... Soupire et accepte que ça fonctionne maintenant
poshaughnessy

4
Ne le modifiez pas en arrière - il est probablement en train de «travailler» sur certains CSS générés à partir de votre fichier SCSS quand il fonctionnait. Utilisez simplement le trait de soulignement. Mais sinon, génial pour le faire fonctionner!
dthree

@poshaughnessy cela pourrait fonctionner car sass utilise le cache, donc il pourrait être mis en cache. Pas sûr à 100%.
PeterM

idem pour sass ??
Martian2049

1
Corrigez que vous êtes @rinogo.
dthree

20

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

1
Cela devrait maintenant être la réponse choisie, car "importation" est marqué comme obsolète et sera supprimé à l'avenir.
TyrionGraphiste

Celui-ci a besoin de plus de votes positifs
ludovico

3

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

1
N'êtes-vous pas censé omettre le soulignement des instructions @import?
Quantum7

1
Sass '@import' fonctionne dans les deux cas. vous pouvez écrire l'URI avec ou sans le soulignement. également avec ou sans la fin «.scss».
Pony

1

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.


Évidemment, c'est une mauvaise idée, vous pouvez avoir de nombreuses variables et il est plus propre de garder l'index avec juste des importations, et chaque fichier à avoir est propre.
Carnaru Valentin
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.