css - usar - sass variables

SASS: use variables en múltiples archivos

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

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.