web-dev-qa-db-fra.com

SASS - utilise des variables sur plusieurs fichiers

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

// _master.scss 

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

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

Y a-t-il un moyen de faire cela dans SCSS?

csssass
160
dthree

Vous pouvez le faire comme ça:

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 telles que:

$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";

ensuite, dans tous les fichiers que j'ai importés, je devrais pouvoir accéder aux variables que j'ai déclarées.

Assurez-vous simplement que vous importez le fichier de variable avant les autres que vous souhaitez utiliser.

263
Joel

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

J'ai créé un fichier maître SCSS. Ce fichier doit doit avoir un trait de soulignement au début pour ê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 fichier _master.scss. Si vous incluez le code CSS réel, il dupliquera ce fichier CSS dans tous les fichiers dans lesquels vous importez le fichier maître.

64
dthree

Pourquoi ne pas écrire une classe basée sur la couleur dans un fichier sass global, sans avoir à se soucier de l'emplacement des variables? Juste comme les suivants:

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

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

et ensuite, nous pouvons utiliser la classe background-color dans n’importe quel fichier . Mon argument est que je n’ai pas besoin d’importer variable.scss dans un fichier, mais de l’utiliser. 

0
gary gao

Créez un fichier index.scss et vous pourrez y importer toutes les structures de fichiers existantes. Je vais vous coller mon index d'un projet d'entreprise, peut-être que cela aidera d'autres à 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']);
0
Carnaru Valentin