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

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.

1

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

Hint

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

2

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

Hint

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

3

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

Hint

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

4

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

Hint

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

Practice

1. What does the @use 'colors' as c; statement do in Sass?

easy

A. It imports the 'colors' file and merges all variables globally.

B. It imports the 'colors' file and renames its namespace to 'c'.

C. It imports the 'colors' file without any namespace.

D. It imports the 'colors' file and disables all variables.

Solution

1. Step 1: Understand the @use rule

   The @use rule imports a Sass file and creates a namespace for its variables and mixins.

2. Step 2: Analyze the as c part

   The as c renames the namespace from the default (usually the filename) to c.

3. Final Answer:

   It imports the 'colors' file and renames its namespace to 'c'. -> Option B

4. Quick Check:

   @use with as renames namespace [OK]

Hint: Remember: @use 'file' as alias; renames namespace [OK]

Common Mistakes:

• Thinking @use removes the namespace
• Confusing @use with @import
• Assuming variables become global without namespace

2. Which of the following is the correct syntax to import a Sass file buttons.scss with namespace btn?

easy

A. @use buttons as btn;

B. @use 'buttons.scss' btn;

C. @use 'buttons' as btn;

D. @use 'buttons' btn;

Solution

1. Step 1: Check the @use syntax

   The correct syntax requires quotes around the filename and the keyword as before the alias.

2. Step 2: Validate each option

   @use 'buttons' as btn; uses quotes and as correctly. Options A, C, and D miss quotes or the as keyword.

3. Final Answer:

   @use 'buttons' as btn; -> Option C

4. Quick Check:

   Quotes + as keyword = correct syntax [OK]

Hint: Always use quotes and 'as' for alias in @use [OK]

Common Mistakes:

• Omitting quotes around filename
• Forgetting the 'as' keyword
• Adding file extension inside quotes unnecessarily

3. Given @use 'theme/colors' as c; and the file colors.scss contains $primary: #0055ff;, what is the correct way to use $primary in your styles?

medium

A. color: c.$primary;

B. color: $primary;

C. color: colors.$primary;

D. color: theme.colors.$primary;

Solution

1. Step 1: Understand namespace usage

   When using @use 'file' as alias;, variables must be accessed with alias.variable.

2. Step 2: Apply alias to variable

   Since the alias is c, the variable $primary is accessed as c.$primary.

3. Final Answer:

   color: c.$primary; -> Option A

4. Quick Check:

   Use alias.variable to access imported variables [OK]

Hint: Use alias.variable to access imported Sass variables [OK]

Common Mistakes:

• Using variable without alias
• Using original filename as namespace instead of alias
• Trying to chain namespaces incorrectly

4. What is wrong with this Sass code?

@use 'utils' as u;
.button { color: $main-color; }

medium

A. Variable $main-color is used without namespace prefix.

B. Missing semicolon after @use statement.

C. The alias 'u' cannot be a single letter.

D. The file 'utils' cannot be used with @use.

Solution

1. Step 1: Verify the @use syntax

   The @use 'utils' as u; statement correctly imports the file with namespace u.

2. Step 2: Check variable usage

   Since @use 'utils' as u; creates a namespace u, variables inside must be accessed as u.$main-color. Using $main-color alone causes an error.

3. Final Answer:

   Variable $main-color is used without namespace prefix. -> Option A

4. Quick Check:

   Variables need namespace prefix after @use [OK]

Hint: Always prefix variables with alias after @use [OK]

Common Mistakes:

• Forgetting to prefix variables with alias
• Assuming @use imports variables globally
• Thinking alias must be longer than one letter

5. You have two Sass files: colors.scss with $primary: #333; and buttons.scss with $primary: #555;. How do you import both files in main.scss using @use with aliases c and b to avoid naming conflicts and use both $primary variables?

hard

A. @import 'colors'; @import 'buttons'; .btn { color: $primary; background: $primary; }

B. @use 'colors'; @use 'buttons'; .btn { color: $primary; background: $primary; }

C. @use 'colors' as colors; @use 'buttons' as colors; .btn { color: colors.$primary; }

D. @use 'colors' as c; @use 'buttons' as b; .btn { color: b.$primary; background: c.$primary; }

Solution

1. Step 1: Use @use with different aliases

   To avoid naming conflicts, import each file with a unique alias: c for colors and b for buttons.

2. Step 2: Access variables with their aliases

   Use b.$primary for button color and c.$primary for background color to distinguish them.

3. Final Answer:

   @use 'colors' as c; @use 'buttons' as b; .btn { color: b.$primary; background: c.$primary; } -> Option D

4. Quick Check:

   Use unique aliases to avoid conflicts [OK]

Hint: Use different aliases to avoid variable name clashes [OK]

Common Mistakes:

• Using same alias for both imports
• Using @import instead of @use
• Accessing variables without alias prefix