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

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?

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.

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:

Confira o projeto sass-globbing .

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

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.

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

@import
  'foo',
  'bar';

Eu prefiro isso.

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.

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.

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

isso funcionou bem pra mim

@import 'folder/*';

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
]

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

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 .