2.3 KiB
2.3 KiB
id | title | required | challengeType | videoUrl | localeTitle | |||||
---|---|---|---|---|---|---|---|---|---|---|
587d7dbf367417b2b2512bbc | Split Your Styles into Smaller Chunks with Partials |
|
0 | Dividir seus estilos em pedaços menores com parciais |
Description
Partials
no Sass são arquivos separados que contêm segmentos de código CSS. Estes são importados e usados em outros arquivos Sass. Essa é uma ótima maneira de agrupar código semelhante em um módulo para mantê-lo organizado. Nomes para partials
começam com o caractere de sublinhado ( _
), que diz ao Sass que é um pequeno segmento de CSS e não para convertê-lo em um arquivo CSS. Além disso, os arquivos Sass terminam com a extensão de arquivo .scss
. Para trazer o código no partial
para outro arquivo Sass, use a diretiva @import
. Por exemplo, se todos os seus mixins
forem salvos em uma parte partial
chamada "_mixins.scss", e eles forem necessários no arquivo "main.scss", é como usá-los no arquivo principal: // No arquivo main.scssNote que o sublinhado não é necessário na declaração de
@import 'mixins'
import
- Sass entende que é partial
. Uma vez que uma partial
é importada para um arquivo, todas as variáveis, mixins
e outros códigos estão disponíveis para uso. Instructions
@import
para importar uma parte partial
_variables.scss
no arquivo main.scss. Tests
tests:
- text: Seu código deve usar a diretiva <code>@import</code> e não deve incluir o sublinhado no nome do arquivo.
testString: 'assert(code.match(/@import\s+?("|")variables\1/gi), "Your code should use the <code>@import</code> directive, and should not include the underscore in the file name.");'
Challenge Seed
// The main.scss file
Solution
// solution required