É possível importar um diretório inteiro no sass usando @import?

209

Estou modularizando minhas folhas de estilo com parciais SASS da seguinte forma:

@import partials/header
@import partials/viewport
@import partials/footer
@import partials/forms
@import partials/list_container
@import partials/info_container
@import partials/notifications
@import partials/queues

existe uma maneira de incluir todo o diretório de parciais (é um diretório cheio de parciais do SASS) como @import compass ou algo assim?

corroído
fonte
3
Não é a resposta, mas é útil: o SASS pode importar vários arquivos em uma importação, como @import 'partials/header', 'partials/viewport', 'partials/footer';.
1111 llobet

Respostas:

201

Se você estiver usando o Sass em um projeto Rails, a gema sass-rails, https://github.com/rails/sass-rails , apresenta a importação global.

@import "foo/*"     // import all the files in the foo folder
@import "bar/**/*"  // import all the files in the bar tree

Para responder à preocupação em outra resposta "Se você importa um diretório, como pode determinar a ordem de importação? Não há como não introduzir um novo nível de complexidade".

Alguns argumentam que organizar seus arquivos em diretórios pode reduzir a complexidade.

O projeto da minha organização é um aplicativo bastante complexo. Existem 119 arquivos Sass em 17 diretórios. Elas correspondem aproximadamente às nossas opiniões e são usadas principalmente para ajustes, com o trabalho pesado sendo tratado por nossa estrutura personalizada. Para mim, algumas linhas de diretórios importados são um pouco menos complexas que 119 linhas de nomes de arquivos importados.

Para endereçar a ordem de carregamento, colocamos os arquivos que precisam ser carregados primeiro - mixins, variáveis ​​etc. - em um diretório de carregamento antecipado. Caso contrário, a ordem de carregamento é e deve ser irrelevante ... se estivermos fazendo as coisas corretamente.

Dennis Best
fonte
7
ou adicione @import "*"(em application.css.scss) se os arquivos css / scss do controlador estiverem na pasta "app / assets / stylesheets" junto com application.css.scss.
26513 Magne
esta "jóia" é buggy e não funciona no Windows, consulte esta questão que foi aberto por um longo tempo e, essencialmente, significa que ele está completamente quebrado github.com/chriseppstein/sass-globbing/issues/3
pilavdzice
Você está falando sobre a joia de Chris Eppstein. Minha resposta usa a gema sass-rails, que é diferente, eu acho. Não estou no Windows, mas não vejo problemas relacionados à gema sass-rails.
Dennis Best
1
Isso não funcionou para mim - o globbing foi dividido em linhas individuais de arquivos individuais. Que nastily, trabalhou em dev, mas não de produção (como só há o caminho ativo uma raiz de application.css em produção)
Peter Ehrlich
5
Funcionou muito bem para mim, obrigado por esta dica. Estou agradavelmente surpreso que dizer @import "*"em application.scss inclua todos os outros arquivos presentes no mesmo diretório, mas não inclua novamente application.scss ... Eu esperava receber um bug em loop infinito.
Topher Hunt
94

Esse recurso nunca fará parte do Sass. Um dos principais motivos é o pedido de importação. Em CSS, os arquivos importados por último podem substituir os estilos declarados anteriormente. Se você importa um diretório, como pode determinar o pedido de importação? Não há como não introduzir um novo nível de complexidade. Mantendo uma lista de importações (como você fez no seu exemplo), você está sendo explícito no pedido de importação. Isso é essencial se você deseja substituir com confiança os estilos definidos em outro arquivo ou gravar mixins em um arquivo e usá-los em outro.

Para uma discussão mais aprofundada, consulte esta solicitação de recurso fechado aqui:

Brandon Mathis
fonte
260
para arquivos CSS bem estruturado, a fim de inclusão não deve importar
Milovan Zogovic
56
@MilovanZogovic Confiar muito em substituições tem um cheiro de código, mas não há nada de errado em usar a cascata. É como a linguagem foi projetada.
Brandon Mathis
34
@BrandonMathis Eu entendo a pureza teórica aqui, mas em uma implementação (a minha e eu presumo que esteja corroída), você pode optar por escrever seu CSS de maneira que os diferentes arquivos não tenham impacto um no outro. Eu tenho um diretório chamado "modules" com arquivos que contêm uma regra de classe css diferente. Quero que todos os arquivos desse diretório sejam incluídos, e a ordem deles não é e, por design, nunca será importante. É uma dor ter que atualizar a lista toda vez que adiciono uma nova.
Robin Winslow
5
Se eu tiver um diretório preenchido com css não aplicáveis,% regras, funções etc., não há riscos envolvidos e o contrário (não permitir) leva apenas a um tédio inútil e a longos "cabeçalhos de importação" nos arquivos, em vez do que poderia ser apenas um linha única de @import "/functions"ou @import "partials/".
Srcpider
3
Um caso de usuário está importando módulos, onde a ordem não é importante e os estilos podem ser espaçados por nomes ... Gostaria de ver essa função - embora concorde que teria que ser usada com sabedoria ...
Will Hancock
41

Confira o projeto sass-globbing .

Akshay Rawat
fonte
1
meu comentário está desatualizado há alguns anos, mas ... o projeto sass-globbing tem um progresso seriamente lento, e apenas um único desenvolvedor que não se preocupa demais em fazer as coisas funcionarem no Windows. Estamos apenas começando a criar um novo que funcione no Linux, Mac e Windows
Stuart
33

Eu crio um arquivo nomeado __partials__.scssno mesmo diretório departials

|- __partials__.scss
|- /partials
   |- __header__.scss
   |- __viewport__.scss
   |- ....

Em __partials__.scss, escrevi estes:

@import "partials/header";
@import "partials/viewport";
@import "partials/footer";
@import "partials/forms";
....

Então, quando eu quiser importar o todo partials, basta escrever @import "partials". Se eu quiser importar qualquer um deles, também posso escrever @import "partials/header".

fen
fonte
2
Essa é uma solução muito boa. É o que faz bússola para simplificar a sua inclusão +1
Jethro Larson
8
Isso é basicamente o mesmo que a configuração do OP. Ele gostaria de importar os arquivos sem adicionar manualmente as @import 'partials/xyz'instruções sempre que uma nova parcial é criada.
gyo
1
Downvoters + Upvoters: você pode explicar como essa resposta é diferente da configuração do OP?
gyo
4
Isso não resolve nada.
precisa
2
@gyo Não ajuda o OP se eles têm apenas um diretório de parciais, mas ajuda as pessoas com vários diretórios de parciais. Se eu tiver formse widgetsdiretórios, posso @import "forms"; @import "widgets"no arquivo CSS principal de uma página e me preocupar apenas com todas as parciais individuais ( @import forms/text; @import forms/button...) dentro forms.scsse widgets.scss.
ttotherat
4

Você pode usar um pouco de solução alternativa, colocando um arquivo sass na pasta que você gostaria de importar e importar todos os arquivos desse arquivo, assim:

caminho do arquivo: main / current / _current.scss

@import "placeholders"; @import "colors";

e no próximo arquivo de nível de diretório, você apenas usa import para arquivo, o que importou todos os arquivos desse diretório:

caminho do arquivo: main / main.scss

@import "EricMeyerResetCSSv20"; @import "clearfix"; @import "current";

Dessa forma, você tem o mesmo número de arquivos, como se estivesse importando o diretório inteiro. Cuidado com a ordem, o arquivo que vier por último substituirá os stiles correspondentes.

IGRACH
fonte
3

Você pode querer manter a ordem de origem e usá-la.

@import
  'foo',
  'bar';

Eu prefiro isso.

dewwwald
fonte
2

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import

não parece.

Se um desses arquivos sempre exigir os outros, importe-os e apenas os de nível superior. Se todos forem independentes, acho que você terá que continuar fazendo o que está fazendo agora.

xaxxon
fonte
sim, vi a documentação, apenas verifiquei se alguém sabia de algum truque ou esperava que fosse apenas um documento não documentado lol. Obrigado pela sugestão, porém
corroída de
2

A resposta aceita por Dennis Best afirma que "Caso contrário, a ordem de carregamento é e deve ser irrelevante ... se estivermos fazendo as coisas corretamente". Isto é simplesmente incorreto. Se você estiver fazendo as coisas corretamente, use a ordem css para ajudá-lo a reduzir a especificidade e a mantê-lo simples e limpo.

O que faço para organizar as importações é adicionar um _all.scssarquivo em um diretório, onde importo todos os arquivos relevantes nele, na ordem correta. Dessa forma, meu principal arquivo de importação será simples e limpo, assim:

// Import all scss in the project

// Utilities, mixins and placeholders
@import 'utils/_all';

// Styles
@import 'components/_all';
@import 'modules/_all';
@import 'templates/_all';

Você também pode fazer isso para subdiretórios, se precisar, mas não acho que a estrutura dos seus arquivos CSS seja muito profunda.

Embora eu use essa abordagem, ainda acho que uma importação global deveria existir no sass, para situações em que a ordem não importa, como um diretório de mixins ou até animações.

BRN
fonte
Se você usar uma abordagem como RSCSS, a especificidade será igual e cada componente se aplicará apenas onde for necessário, sem conflitos.
RWDJ 01/08/19
1

Também procuro uma resposta para sua pergunta. Corresponda às respostas a importação correta de todas as funções não existe.

É por isso que escrevi um script python que você precisa colocar na raiz da sua pasta scss da seguinte maneira:

- scss
  |- scss-crawler.py
  |- abstract
  |- base
  |- components
  |- layout
  |- themes
  |- vender

Ele irá percorrer a árvore e encontrar todos os arquivos scss. Uma vez executado, ele criará um arquivo scss chamado main.scss

#python3
import os

valid_file_endings = ["scss"]

with open("main.scss", "w") as scssFile:
    for dirpath, dirs, files in os.walk("."):
        # ignore the current path where the script is placed
        if not dirpath == ".":
            # change the dir seperator
            dirpath = dirpath.replace("\\", "/")

            currentDir = dirpath.split("/")[-1]
            # filter out the valid ending scss
            commentPrinted = False
            for file in files:
                # if there is a file with more dots just focus on the last part
                fileEnding = file.split(".")[-1]
                if fileEnding in valid_file_endings:
                    if not commentPrinted:
                        print("/* {0} */".format(currentDir), file = scssFile)
                        commentPrinted = True
                    print("@import '{0}/{1}';".format(dirpath, file.split(".")[0][1:]), file = scssFile)

um exemplo de um arquivo de saída:

/* abstract */
@import './abstract/colors';
/* base */
@import './base/base';
/* components */
@import './components/audioPlayer';
@import './components/cardLayouter';
@import './components/content';
@import './components/logo';
@import './components/navbar';
@import './components/songCard';
@import './components/whoami';
/* layout */
@import './layout/body';
@import './layout/header';
Sens4
fonte
0

isso funcionou bem pra mim

@import 'folder/*';
Siddhartha Mukherjee
fonte
7
Eu acho que isso é por causa do recurso ruby ​​não SASS. Alguns compiladores têm problemas com esse caminho. Por exemplo, eu usei isso pelo gulp-ruby-sass e funcionou, mas usando o gulp-sass gerou um erro.
Morteza Ziyae
0

Você pode gerar um arquivo SASS que importa tudo automaticamente, eu uso esta tarefa Gulp:

concatFilenames = require('gulp-concat-filenames')

let concatFilenamesOptions = {
    root: './',
    prepend: "@import '",
    append: "'"
}
gulp.task('sass-import', () => {
    gulp.src(path_src_sass)
        .pipe(concatFilenames('app.sass', concatFilenamesOptions))
        .pipe(gulp.dest('./build'))
})

Você também pode controlar a ordem de importação ordenando as pastas da seguinte maneira:

path_src_sass = [
    './style/**/*.sass', // mixins, variables - import first
    './components/**/*.sass', // singule components
    './pages/**/*.sass' // higher-level templates that could override components settings if necessary
]
Miro Junker
fonte
0

Pode ser uma pergunta antiga, mas ainda relevante em 2020, para que eu possa postar alguma atualização. Desde a atualização do Octobers'19, geralmente devemos usar @use em vez de @import , mas isso é apenas uma observação. A solução para esta pergunta é usar arquivos de índice para simplificar a inclusão de pastas inteiras. Exemplo abaixo.

// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

// foundation/_index.scss
@use 'code';
@use 'lists';

// style.scss
@use 'foundation';

https://sass-lang.com/documentation/at-rules/use#index-files

Pensador
fonte
1
Eu acho que você deseja usar @forwardno seu _index.scss em vez de@use
Isaac Pak
-4

Com a definição do arquivo a ser importado, é possível usar todas as definições comuns de pastas.

Assim, @import "style/*" irá compilar todos os arquivos na pasta style.

Mais sobre o recurso de importação no Sass, você pode encontrar aqui .

Nesha Zoric
fonte