freeCodeCamp/curriculum/challenges/portuguese/03-front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.portuguese.md

id	title	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.scss

@import 'mixins'

Note que o sublinhado não é necessário na declaração de 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

Escreva uma instrução @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