SASS: use variables en varios archivos

217

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?

dthree
fuente
Estoy bastante seguro de que eso no es posible, intenté lo mismo hace un tiempo y no pude hacerlo funcionar.
DrCord
8
@DrCord, por el contrario, es una característica central de SASS: sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials
Ennui
¡Dulce! Creo que podría haber leído mal esta declaración: "Las directivas que solo están permitidas en el nivel base de un documento, como mixin o charset, no están permitidas en archivos que se importan en un contexto anidado". y no leer correctamente la parte de "contexto anidado".
DrCord

Respuestas:

325

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.

Joel
fuente
44
Perfecto. Justo lo que quise decir y necesitaba. Última pregunta: ¿se espera que todos los archivos importados comiencen con un guión bajo? Subraya su nombre de archivo, pero no lo hace en las declaraciones de @import.
dthree
46
esos archivos se consideran archivos parciales y los nombres tienen que comenzar con guiones bajos, sin embargo, se omite al importarlos. hay un artículo realmente bueno que detalla por qué aquí: alistapart.com/article/getting-started-with-sass
Joel
77
Tenga en cuenta que puede declarar por defecto dentro de sus módulos: $black: #000 !default;. La !defaultcosa evita que la variable se restablezca si ya existe.
Andrey Mikhaylov - lolmaus
2
¿Por qué tenemos que volcar todas las variables en un solo archivo? ¿No podemos dividirlos y soltarlos en el archivo respectivo que los necesita? Por ejemplo, las variables necesarias para el diálogo modal ¿no podemos ubicarlas en _modal.scss?
VJAI
3
Esta respuesta ya no es la forma recomendada de reutilizar variables en varios archivos. Consulte stackoverflow.com/a/61500282/7513192
descubra
82

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.

dthree
fuente
55
¡Muchas gracias por tu comentario sobre el archivo que necesita comenzar con un guión bajo! Acabo de pasar unas 3 horas tratando de descubrir por qué me faltaban muchos estilos de Foundation. Cambié el nombre de archivo de mi archivo de configuración de Foundation para comenzar con un guión bajo y ¡listo! Pero ahora, cuando vuelvo a cambiar el nombre del archivo, ¿sigue funcionando? Que....? Oh bueno ... Suspira y acepta que ahora está funcionando
poshaughnessy
44
No lo vuelva a cambiar, probablemente esté 'trabajando' con algunos CSS generados de su archivo SCSS cuando estaba funcionando. Solo usa el guión bajo. Pero por lo demás, ¡genial para que funcione!
dthree
@poshaughnessy podría funcionar porque sass usa caché, por lo que podría almacenarse en caché. No estoy 100% seguro.
PeterM
lo mismo para sass ??
Martian2049
1
Correcto eres @rinogo.
Tres de
18

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;
}
whiscode
fuente
1
Esta debería ser ahora la respuesta seleccionada, ya que "importar" está marcado como obsoleto y se eliminará en el futuro.
TyrionGraphiste
Éste necesita más upvotes
Ludovico
3

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']);
Carnaru Valentin
fuente
1
¿No se supone que debes omitir el guión bajo de las declaraciones de @import?
Quantum7
1
Sass '@import' funciona de cualquier manera. Puede escribir el URI con o sin guión bajo. también con o sin el final '.scss'.
Pony
1

¿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.

Gary Gao
fuente
Obviamente es una mala idea, puede tener muchas variables y es más limpio mantener el índice solo con importaciones, y cada archivo que se tiene es propio.
Carnaru Valentin