EduByte.tech
Start learning
Sass·Sass from variables to a design system

Partials and imports

Split styles into partials and load them with @use.

Intermediate 13 min read Lesson 4 of 300 Challenge included
What you will be able to do
  • Name partials _tokens.scss.
  • Use @use "tokens" as * or with a namespace.
  • Avoid @import in new code.
  • Keep one entry file that loads the rest.

In plain English

Partials start with an underscore and are not compiled on their own. Modern Sass uses @use, which namespaces the module and loads it once. @import is deprecated.

main.scssSCSS
@use "tokens";
@use "components/card";

body {
  background: tokens.$surface;
}
Your turn

Load a partial

Easy

Load a partial named tokens without a namespace.

SCSS · starter
@use
Check your understanding before moving on.
Knowledge checkQuestion 1

Which directive should new Sass code use?

Select an answer to continue
Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.
Sign in
Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Mixins
Lesson 4 of 300 · 0% of course