@import to @use migration in SASS - Mini Project: Build & Apply

@import to @use Migration in Sass

📖 Scenario: You have a small Sass project that uses the old @import rule to include styles from other files. You want to update it to use the modern @use rule, which is the recommended way to load Sass files now.This will help your styles be more organized and avoid problems with variables and mixins being loaded multiple times.

🎯 Goal: Convert a Sass file that uses @import to use @use instead. You will create a variables file, import it with @use, and then use the variables in your main style file.

📋 What You'll Learn

Create a Sass partial file named _variables.scss with some color variables.

Create a main Sass file named styles.scss that uses @use to load _variables.scss.

Use the variables from _variables.scss in styles.scss with the correct namespace.

Do not use @import anywhere in the final code.

💡 Why This Matters

🌍 Real World

Modern Sass projects use @use instead of @import to avoid duplicate styles and variable conflicts. This helps keep stylesheets clean and maintainable.

💼 Career

Front-end developers often need to update legacy Sass codebases to use @use and @forward for better modularity and performance.

1

Create _variables.scss with color variables

Create a Sass partial file named _variables.scss and define these variables exactly: $primary-color: #3498db; and $secondary-color: #2ecc71;

SASS

# Your code here

Need a hint?

Remember to start the file name with an underscore (_) to make it a partial.

2

Create styles.scss and add @use for variables

Create a Sass file named styles.scss and add the line @use 'variables'; at the top to load the variables partial.

SASS

// Add @use 'variables'; below
# Your code here

Need a hint?

The @use rule loads the partial and adds a namespace by default.

3

Use variables from variables namespace in styles.scss

In styles.scss, add a CSS rule for body that sets background-color to variables.$primary-color and color to variables.$secondary-color.

SASS

// Add body selector with background-color and color using variables namespace
# Your code here

Need a hint?

Use the namespace variables. before variable names when using @use.

4

Remove any @import and finalize the Sass files

Make sure there is no @import in styles.scss or _variables.scss. The files should only use @use and variable definitions as before.

SASS

// Remove any @import statements if present
# Your code here

Need a hint?

The modern Sass way is to use @use instead of @import. Make sure no @import remains.