SASS: use variables en múltiples archivos

Me gustaría mantener un archivo .scss central que almacene todas las definiciones de variables SASS para un proyecto.

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

El proyecto tendrá una gran cantidad de archivos CSS, debido a su naturaleza. Es importante que declare todas las variables de estilo de proyecto en una ubicación.

¿Hay alguna manera de hacer esto en SCSS?

Puedes hacerlo así:

Tengo una carpeta llamada utilidades y dentro tengo un archivo llamado _variables.scss

en ese archivo, declaro variables como estas:

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

entonces tengo el archivo style.scss en el que importo todos mis otros archivos scss como este:

 // Utilities @import "utilities/variables"; // Base Rules @import "base/normalize"; @import "base/global"; 

luego, dentro de cualquiera de los archivos que he importado, debería poder acceder a las variables que he declarado.

Solo asegúrese de importar el archivo variable antes que cualquiera de los otros en los que le gustaría usarlo.

Esta respuesta muestra cómo terminé usando esto y las trampas adicionales que golpeé.

Hice un archivo maestro SCSS. Este archivo debe tener un guión bajo al comienzo para que se importe:

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

Luego, en el encabezado de todos mis otros archivos .SCSS, importo el maestro:

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

No incluya nada más que variables, declaraciones de funciones y otras características de SASS en su archivo _master.scss . Si incluye CSS real, duplicará este CSS en cada archivo al que importe el maestro.

Crea un index.scss y allí puedes importar toda la estructura de archivos que tengas. Voy a pegar mi índice de un proyecto empresarial, quizás ayude a otros cómo estructurar archivos 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'; 

Y puedes verlos con gulp / grunt / webpack, etc., como:

gulpfile.js

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