Partials and @import in SASS – a way to split your CSS into smaller files and combine them into one output. Useful when a single stylesheet has grown too large to navigate comfortably.
What are partials?
Partials are small segments of CSS in separate files. They are conventionally named with a leading underscore (e.g. _variables.scss). Each partial handles one concern – variables, mixins, base styles, components – and you pull them together with @import.
Creating partials
Create a new .scss file with an underscore prefix:
// _variables.scss
$primary-color: #3498db;
$secondary-color: #e74c3c;_variables.scss holds colour variables used across the project.
Using the import feature
The @import directive includes one file’s content in another. A main stylesheet imports the partials it needs:
// styles.scss
@import 'variables';
@import 'mixins';
@import 'base';styles.scss imports three partials and compiles them into a single CSS file.
Advantages of using partials and import
- Organisation: Separate partials for variables, mixins, base styles, and components keep things logical.
- Maintainability: Change a partial and every file that imports it gets the update.
- Collaboration: Different developers can work on different partials without constant merge conflicts.
- Performance: Partials are a development-time organisation tool. The compiled output is still a single CSS file.
Best practices for using partials and import
- Logical structuring: Organise partials in a way that suits your project – by component, page, or function (colours, typography, etc.).
- Avoid excessive nesting: Partials can import other partials, but deep chains get confusing. Keep the structure flat where you can.
- Use clear naming conventions: Name partials so their purpose is obvious from the filename.
Partials are one of those features that pay off quickly on anything beyond a small site. Split the work, import what you need, and the compiled CSS stays clean.