Namespace control with @use as in SASS - Performance & Optimization

Performance: Namespace control with @use as

MEDIUM IMPACT

This affects CSS bundle size and style calculation by controlling how styles and variables are imported and referenced.

Importing Sass modules with controlled namespaces to avoid style duplication

SASS

@use 'colors' as c;
.button {
  color: c.$primary-color;
}

Using @use with a namespace imports styles once and references variables explicitly, preventing duplication.

📈 Performance Gainreduces CSS bundle size by up to 20%, single style calculation

Importing Sass modules with controlled namespaces to avoid style duplication

SASS

@import 'colors';
@import 'colors';
.button {
  color: $primary-color;
}

Using @import multiple times duplicates styles and variables, increasing CSS size and causing redundant style recalculations.

📉 Performance Costadds extra CSS rules increasing bundle size by 10-20%, triggers multiple style recalculations

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
@import multiple times	N/A	N/A	Higher paint cost due to larger CSS	[X] Bad
@use with namespace alias	N/A	N/A	Lower paint cost due to smaller CSS	[OK] Good

Rendering Pipeline

The Sass compiler processes @use with namespaces once, generating a single CSS output. This reduces redundant CSS rules, lowering style calculation and layout costs in the browser.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckStyle Calculation due to duplicated CSS rules

Core Web Vital Affected

LCP

This affects CSS bundle size and style calculation by controlling how styles and variables are imported and referenced.

Optimization Tips

1Use @use with namespaces to import Sass modules once and avoid CSS duplication.

2Avoid multiple @import statements for the same module to reduce CSS bundle size.

3Smaller CSS bundles improve Largest Contentful Paint (LCP) by speeding up style calculation.

Performance Quiz - 3 Questions

What is a main performance benefit of using @use with a namespace alias in Sass?

A It reduces the number of DOM nodes created.

B It automatically minifies the CSS output.

C It prevents duplication of CSS rules in the final bundle.

D It speeds up JavaScript execution.

DevTools: Network

How to check: Open DevTools, go to Network panel, reload page, filter by CSS files, and compare file sizes of CSS bundles.

What to look for: Smaller CSS file size indicates better use of @use with namespaces; larger files suggest duplicated styles from @import.

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