css - react - SASS-utilise des variables sur plusieurs fichiers




variable sass (2)

Je voudrais garder 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 aura 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 dans un seul emplacement.

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


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

J'ai fait 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 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; }

IMPORTANT

N'incluez rien d'autre que des variables, des déclarations de fonctions et d'autres fonctions SASS dans votre fichier _master.scss . Si vous incluez du CSS réel, il dupliquera ce CSS sur tous les fichiers dans lesquels vous importez le master.


Créez un index.scss et là vous pouvez importer toute la structure de fichier que vous avez. Je vais vous coller mon index à partir d'un projet d'entreprise, peut-être que cela aidera d'autres à structurer des fichiers dans 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']);






sass