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

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
587d7dbf367417b2b2512bbc	Split Your Styles into Smaller Chunks with Partials	0	301459	split-your-styles-into-smaller-chunks-with-partials

--description--

Partials in Sass are separate files that hold segments of CSS code. These are imported and used in other Sass files. This is a great way to group similar code into a module to keep it organized.

Names for partials start with the underscore (_) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file. Also, Sass files end with the .scss file extension. To bring the code in the partial into another Sass file, use the @import directive.

For example, if all your mixins are saved in a partial named "_mixins.scss", and they are needed in the "main.scss" file, this is how to use them in the main file:

// In the main.scss file

@import 'mixins'

Note that the underscore and file extension are not needed in the import statement - Sass understands it is a partial. Once a partial is imported into a file, all variables, mixins, and other code are available to use.

--instructions--

Write an @import statement to import a partial named _variables.scss into the main.scss file.

--hints--

Your code should use the @import directive, and should not include the underscore in the file name.

assert(code.match(/@import\s+?('|")variables\1/gi));

--seed--

--seed-contents--

<!-- The main.scss file -->

--solutions--

@import 'variables'