SASS - use variáveis ​​em vários arquivos

217

Gostaria de manter um arquivo .scss central que armazena todas as definições de variáveis ​​SASS para um projeto.

// _master.scss 

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

O projeto terá um grande número de arquivos CSS, devido à sua natureza. É importante declarar todas as variáveis ​​de estilo de todo o projeto em um local.

Existe uma maneira de fazer isso no SCSS?

dthree
fonte
Tenho certeza de que isso não é possível, tentei a mesma coisa há algum tempo e não consegui fazê-lo funcionar.
11133 DrCord
8
@DrCord, pelo contrário, é um recurso central do SASS: sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#partials
Ennui
Doce! Acho que posso ter interpretado mal esta declaração: "Diretivas que são permitidas apenas no nível base de um documento, como mixin ou charset, não são permitidas em arquivos importados em um contexto aninhado". e não leu corretamente a parte "contexto aninhado".
11113 DrCord

Respostas:

325

Você pode fazer assim:

Eu tenho uma pasta chamada utilitários e dentro dela eu tenho um arquivo chamado _variables.scss

Nesse arquivo, declaro variáveis ​​da seguinte forma:

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

então eu tenho o arquivo style.scss no qual importo todos os meus outros arquivos scss como este:

// Utilities
@import "utilities/variables";

// Base Rules
@import "base/normalize";
@import "base/global";

então, em qualquer um dos arquivos que importei, devo poder acessar as variáveis ​​que declarei.

Apenas certifique-se de importar o arquivo variável antes de qualquer outro em que você gostaria de usá-lo.

Joel
fonte
4
Perfeito. Apenas o que eu quis dizer e precisava. Última pergunta: Todos os arquivos importados devem começar com um sublinhado? Você sublinha o nome do arquivo, mas falha nas declarações @import.
dthree
46
esses arquivos são considerados arquivos parciais e os nomes precisam começar com sublinhados; você o exclui ao importá-lo. há um artigo muito bom que os detalhes Por que aqui: alistapart.com/article/getting-started-with-sass
Joel
7
Note que você pode declarar padrões dentro de seus módulos: $black: #000 !default;. O !defaultitem impede que a variável seja redefinida se ela já existir.
Andrey Mikhaylov - lolmaus
2
Por que precisamos despejar todas as variáveis ​​em um único arquivo? Não podemos dividir e soltá-los no respectivo arquivo que precisa deles? Por exemplo, as variáveis ​​necessárias para o diálogo modal não podemos colocá-las em _modal.scss?
VJAI
3
Essa resposta não é mais a maneira recomendada de reutilizar variáveis ​​em vários arquivos. Consulte stackoverflow.com/a/61500282/7513192
whiscode
82

Esta resposta mostra como eu acabei usando isso e as armadilhas adicionais que encontrei.

Eu criei um arquivo SCSS mestre. Este arquivo deve ter um sublinhado no início para ser importado:

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

Em seguida, no cabeçalho de todos os meus outros arquivos .SCSS, importo o mestre:

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

Não inclua nada além de variáveis, declarações de função e outros recursos do SASS em seu _master.scssarquivo. Se você incluir CSS real, ele será duplicado em todos os arquivos nos quais você importa o mestre.

dthree
fonte
5
Muito obrigado pelo seu comentário sobre o arquivo que precisa começar com um sublinhado! Passei apenas três horas tentando descobrir por que estava perdendo vários estilos da Foundation. Alterei o nome do arquivo do meu arquivo de configurações da Foundation para começar com um sublinhado e pronto! Mas agora, quando altero o nome do arquivo novamente, ele ainda está funcionando? O que....? Oh bem ... suspiros e aceita que está trabalhando agora
poshaughnessy
4
Não mude de volta - provavelmente está 'trabalhando' com algum CSS gerado do seu arquivo SCSS quando estava funcionando. Basta usar o sublinhado. Mas, caso contrário, ótimo em fazê-lo funcionar!
dthree
@poshaughnessy pode funcionar porque o sass usa cache, portanto pode ser armazenado em cache. Não é 100% certo.
peterm
mesmo para sass ??
Martian2049
1
Correto, você é @rinogo.
dthree
18

Esta pergunta foi feita há muito tempo, então pensei em publicar uma resposta atualizada.

Agora você deve evitar o uso @import. Retirado dos documentos:

O Sass irá gradualmente eliminá-lo nos próximos anos e, eventualmente, removê-lo totalmente do idioma. Prefira a regra @use.

Uma lista completa dos motivos pode ser encontrada aqui

Agora você deve usar @usecomo mostrado abaixo:

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

Você também pode criar um alias para o espaço para nome:

_otherFile.scss

@use 'variables' as v;

body {
  // alias.$variable-name
  color: v.$text-colour;
}
codificar
fonte
1
Agora, essa deve ser a resposta selecionada, pois "import" está marcado como obsoleto e será removido no futuro.
TyrionGraphiste
Este precisa de mais votos positivos
ludovico 15/06
3

Crie um index.scss e aí você poderá importar toda a estrutura de arquivos que possui. Vou colar o meu índice de um projeto corporativo, talvez ajude outros a estruturar arquivos em 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';

E você pode assisti-los com gulp / grunt / webpack etc, como:

gulpfile.js

// Tarefa 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
fonte
1
Você não deveria omitir o sublinhado das instruções @import?
precisa saber é o seguinte
1
Sass '@import' funciona de qualquer maneira. você pode escrever o URI com ou sem o sublinhado. também com ou sem o final '.scss'.
Pony
1

Que tal escrever alguma classe baseada em cores em um arquivo sass global, portanto, não precisamos nos importar onde estão as variáveis. Assim como o seguinte:

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

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

e então, podemos usar a background-colorclasse em qualquer arquivo. O que quero dizer é que não preciso importar variable.scssnenhum arquivo, apenas usá-lo.

Gary Gao
fonte
Óbvia é uma péssima idéia, você pode ter muitas variáveis ​​e é mais limpo para manter o índice com apenas importações, e todos os arquivos que você possui são propostos.
Carnaru Valentin