Sass Import
Sass lets you split your stylesheets into small, focused files and pull them together with @use and the legacy @import rule, keeping large projects organized and maintainable.
Why Split Styles Into Partials
As a stylesheet grows, one giant file becomes hard to navigate. Sass encourages you to break styles into smaller files called partials, each responsible for one concern such as colors, typography, buttons, or layout. A partial is a normal Sass file whose name begins with an underscore, for example _buttons.scss. The leading underscore tells Sass not to compile that file into its own separate CSS output file; it only exists to be pulled into another file.
Once your styles live in partials, a single entry file (often called main.scss or styles.scss) assembles them in the right order. This keeps each file short and readable while still producing one combined CSS file for the browser.
The Modern @use Rule
The recommended way to bring one Sass file into another is @use. It loads variables, mixins, and functions from another partial and namespaces them automatically, which prevents naming collisions between files.
Loading a partial with @use
<!DOCTYPE html>
<html>
<body>
<div style="font-family: sans-serif; max-width: 640px; margin: 40px auto; padding: 20px; border: 1px solid #E9EBE6; border-radius: 8px; background: #F5F6F5;">
<h2 style="margin-top:0;">Multi-file example</h2>
<p>This example spans multiple Sass files (<code>@use</code> / <code>@forward</code> across separate partials), so it can't be compiled as a single live preview here. Read the code on the left to see how the files fit together — the comments mark where each file begins.</p>
</div>
</body>
</html>Notice that everything imported from colors.scss must be prefixed with the namespace colors. followed by a dot. By default the namespace is simply the file name without its underscore or extension. You can rename it if you prefer a shorter prefix.
Renaming a namespace with as
<!DOCTYPE html>
<html>
<body>
<div style="font-family: sans-serif; max-width: 640px; margin: 40px auto; padding: 20px; border: 1px solid #E9EBE6; border-radius: 8px; background: #F5F6F5;">
<h2 style="margin-top:0;">Multi-file example</h2>
<p>This example spans multiple Sass files (<code>@use</code> / <code>@forward</code> across separate partials), so it can't be compiled as a single live preview here. Read the code on the left to see how the files fit together — the comments mark where each file begins.</p>
</div>
</body>
</html>Re-exporting With @forward
Sometimes you want a single file to act as the public entry point for a whole folder of partials, so other files only need one @use statement. The @forward rule makes the members of one partial available to anyone who loads the forwarding file, without giving the forwarding file itself direct access to use those members.
Forwarding multiple partials
<!DOCTYPE html>
<html>
<body>
<div style="font-family: sans-serif; max-width: 640px; margin: 40px auto; padding: 20px; border: 1px solid #E9EBE6; border-radius: 8px; background: #F5F6F5;">
<h2 style="margin-top:0;">Multi-file example</h2>
<p>This example spans multiple Sass files (<code>@use</code> / <code>@forward</code> across separate partials), so it can't be compiled as a single live preview here. Read the code on the left to see how the files fit together — the comments mark where each file begins.</p>
</div>
</body>
</html>@use vs the Legacy @import Rule
Older Sass code often uses @import instead. It works similarly at first glance but dumps every variable, mixin, and function into the global namespace with no prefix required, which makes large projects prone to naming clashes. @import is being phased out of the language in favor of @use and @forward, so new projects should avoid it.
A typical real-world entry file might look like a short list of @use statements at the top, followed by the actual rules that apply them, giving anyone opening the file an instant map of the project's structure.
A realistic main.scss
<!DOCTYPE html>
<html>
<body>
<div style="font-family: sans-serif; max-width: 640px; margin: 40px auto; padding: 20px; border: 1px solid #E9EBE6; border-radius: 8px; background: #F5F6F5;">
<h2 style="margin-top:0;">Multi-file example</h2>
<p>This example spans multiple Sass files (<code>@use</code> / <code>@forward</code> across separate partials), so it can't be compiled as a single live preview here. Read the code on the left to see how the files fit together — the comments mark where each file begins.</p>
</div>
</body>
</html>Exercise: Sass Import
What does the Sass team currently recommend for loading other files?
