SASSmarkup~30 mins

Namespace control with @use as in SASS - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Namespace Control with @use as in Sass

📖 Scenario: You are building a simple website style using Sass. You want to organize your colors in a separate file and use them in your main style file. To avoid long names, you will use @use with an alias to control the namespace.

🎯 Goal: Create a Sass project where you define colors in one file, then import them with an alias using @use as in another file, and apply those colors to HTML elements.

📋 What You'll Learn

Create a _colors.scss file with color variables.

Use @use 'colors' as c in styles.scss to import colors with alias c.

Apply the aliased color variables to style the body and h1 elements.

Ensure the Sass compiles correctly and the styles apply as expected.

💡 Why This Matters

🌍 Real World

Using @use with aliases helps keep Sass code organized and avoids long variable names, especially in large projects with many partials.

💼 Career

Understanding Sass namespace control is important for front-end developers working on scalable and maintainable CSS codebases.

Progress0 / 4 steps

Create the colors partial with variables

Create a Sass partial file named _colors.scss and define two color variables: $primary-color set to #3498db and $secondary-color set to #2ecc71.

SASS

// Create two color variables in _colors.scss
// Your code here

Need a hint?

Use the $ sign to create variables in Sass. The file name must start with an underscore to be a partial.

Import colors with alias using @use as

In styles.scss, import the _colors.scss file using @use 'colors' as c; to give it the alias c.

SASS

// Import colors partial with alias c
// Your code here

Need a hint?

Use @use 'colors' as c; to import the colors partial with the alias c.

Apply aliased color variables to styles

In styles.scss, write styles for the body element using c.$primary-color for background-color and for the h1 element using c.$secondary-color for color.

SASS

// Style body and h1 using aliased colors
// Your code here

Need a hint?

Use the alias c followed by a dot and the variable name to access the colors.

Add HTML structure to see styles applied

Create a simple HTML file with a <body> containing an <h1> heading. Link the compiled CSS file from styles.scss so you can see the background and text colors applied.

SASS

// Add HTML structure below
// Your code here

Need a hint?

Use a standard HTML5 structure and link the compiled CSS file named styles.css.