SASS: use variables en varios 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 todo el proyecto en una ubicación.

¿Hay alguna manera de hacer esto en SCSS?

Puedes hacerlo así:

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

en ese archivo declaro variables así:

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

entonces, 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 dificultades adicionales que encontré.

Hice un archivo SCSS maestro. Este archivo debe tener un guión bajo al principio 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 _master.scssarchivo. Si incluye CSS real, duplicará este CSS en cada archivo en el que importe el maestro.

Esta pregunta se hizo hace mucho tiempo, así que pensé en publicar una respuesta actualizada.

Ahora debe evitar usar @import. Tomado de los documentos:

Sass lo eliminará gradualmente en los próximos años y eventualmente lo eliminará por completo del lenguaje. Prefiere la regla @use en su lugar.

Puede encontrar una lista completa de razones aquí

Ahora debe usar @usecomo se muestra a continuación:

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

También puede crear un alias para el espacio de nombres:

_otherFile.scss

@use 'variables' as v;

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

Cree un index.scss y allí podrá importar toda la estructura de archivos que tenga. Pegaré mi índice de un proyecto empresarial, tal vez ayude a otras formas de 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 puede 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']);

¿Qué tal escribir alguna clase basada en el color en un archivo sass global? Por lo tanto, no necesitamos preocuparnos de dónde están las variables. Al igual que lo siguiente:

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

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

y luego, podemos usar la background-colorclase en cualquier archivo. Mi punto es que no necesito importar variable.scssen ningún archivo, solo úselo.