Por que colocar na frente do nome do arquivo “_” ou “_” em scss / css?

147

Por que colocar _na frente do nome do arquivo em scss?

_filename.scss- Por que isso precisa _?

css sass Niko_D
fonte

Respostas:

147

O _ (sublinhado) é parcial para scss. Isso significa que a folha de estilo será importada (@import) para uma folha de estilo principal, por exemplo, styles.scss. A vantagem do uso de parciais é que você pode usar muitos arquivos para organizar seu código e tudo será compilado em um único arquivo.

Fabian Parra
fonte
3
mas import '_file';e import '_file';faz a mesma coisa, certo?
precisa saber é o seguinte
20
@aokaddaoc parece que você escreveu na mesma linha de código :)
Amit
20
Oh, obrigado por apontar meu erro. "mas import '_file';e import 'file';faz a mesma coisa, certo?"
tom10271
5
Se eu estruturo meus arquivos de uma maneira que apenas envio um único arquivo ao meu compilador / pré-processador, por que importa se meus arquivos são anexados _? Estou pensando em remover o sublinhado dos meus nomes de arquivo. Se um arquivo Sass é ou não parcial (ou seja, um trecho de código importável) deve depender de sua localização na arquitetura do seu projeto, não de como o nome do arquivo.
ESR
1
@ESR: Concordo, esse recurso parece um pouco desatualizado em um ambiente moderno de desenvolvimento web. Definitivamente, você não precisa _deles se tiver seu projeto estruturado de maneira razoável.
Chris Jaynes
55

Um arquivo sass começando com um sublinhado é parcial. É uma boa maneira de manter seus estilos separados em seções lógicas. Todos esses arquivos são mesclados na compilação quando você usa@import .

No guia do idioma Sass:

Você pode criar arquivos Sass parciais que contêm pequenos trechos de CSS que podem ser incluídos em outros arquivos Sass. Essa é uma ótima maneira de modularizar seu CSS e ajudar a manter as coisas mais fáceis de manter. Um parcial é simplesmente um arquivo Sass nomeado com um sublinhado à esquerda. Você pode nomear algo como _partial.scss. O sublinhado informa ao Sass que o arquivo é apenas um arquivo parcial e que não deve ser gerado em um arquivo CSS. As parciais sass são usadas com a diretiva @import.

http://sass-lang.com/guide

cameronjonesweb
fonte
14

Quando você inclui "_" na frente do nome do arquivo, ele não será gerado em CSS, a menos que você o importe para outros arquivos sass que não sejam parciais.

suponha que sua estrutura de pastas seja assim

/scss
 style.scss
 _list.scss
/css

se você executar o comando

sass --watch scss:css

somente os arquivos style.css e style.css.map serão criados, o compilador sass omitirá _list.scss sem converter seu conteúdo em um arquivo CSS.

/scss
 style.scss
 _list.scss
/css
 style.css
 style.css.map

a única maneira de usar parciais é importá-las para outro arquivo .scss com 

@import 'list.scss';

Se você remover o '_' na frente de _list.scss, o resultado do comando será

/scss
 style.scss
 list.scss
/css
 style.css
 style.css.map
 list.css
 list.css.map

O principal objetivo do uso de parciais é decompor nosso código CSS em várias partes mais fáceis de manter. Espero que isto ajude. Obrigado.

dmcshehan
fonte
3
Esta é a resposta certa. Mas você também não mencionou o caso especial de _index.scss: sass-lang.com/documentation/at-rules/import#index-files
tiffon
11

Arquivos com _ (sublinhado) são ignorados pelo compilador. No entanto, todos esses arquivos são importados para um único arquivo SCSS principal (ou seja, styles.scss), que na verdade é o arquivo que é compilado (ele não possui _ (sublinhado) em seu nome)

O objetivo final é compilar apenas um arquivo SCSS e ter apenas um arquivo CSS como resultado, o que tem várias vantagens.

Tahi Reu
fonte