259eec5ab5
Added that the Sass import statement doesn't need the file extension like it doesn't need the underscore. This helps beginners to better understand the concept and avoid confusion.
2.0 KiB
2.0 KiB
id, title, challengeType
| id | title | challengeType |
|---|---|---|
| 587d7dbf367417b2b2512bbc | Split Your Styles into Smaller Chunks with Partials | 0 |
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 fileNote that the underscore and file extension are not needed in the
@import 'mixins'
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
@import statement to import a partial named _variables.scss into the main.scss file.
Tests
tests:
- text: Your code should use the <code>@import</code> directive, and should not include the underscore in the file name.
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