Academy / Advanced Level: HTML and CSS

CSS Preprocessors: SASS/SCSS

Partials and Imports for Modular CSS

Partials allow you to split your CSS into multiple files, each containing specific styles for a component or section. This keeps your codebase organized and modular, especially in large projects. These partials can be imported into your main SCSS file using the @import directive.

Partials are SCSS files that start with an underscore (e.g., _header.scss). The underscore tells SASS that the file is a partial and should not be compiled into a standalone CSS file.

Example:

• _header.scss:scssCopy codeheader { background-color: #3498db; color: white; padding: 20px; }
• _footer.scss:scssCopy codefooter { background-color: #2c3e50; color: #ecf0f1; padding: 20px; }
• Main SCSS file (e.g., style.scss):scssCopy code@import 'header'; @import 'footer';

When compiled, style.scss will include the styles from both _header.scss and _footer.scss into a single CSS file.