Importing built-in modules with @use in SASS - Mini Project: Build & Apply

Importing Built-in Modules with @use in Sass

📖 Scenario: You are creating a simple style sheet for a webpage. You want to use Sass's built-in math module to perform some calculations for your styles.

🎯 Goal: Build a Sass file that imports the built-in math module using @use and uses it to set a CSS custom property with a calculated value.

📋 What You'll Learn

Use the @use rule to import the built-in math module.

Create a CSS custom property --half-width that is half of 200px using math.div().

Write valid Sass code that compiles to CSS with the custom property inside the :root selector.

💡 Why This Matters

🌍 Real World

Using built-in Sass modules helps you write cleaner and more powerful stylesheets by reusing common functions like math calculations.

💼 Career

Knowing how to import and use Sass modules is important for front-end developers working with advanced CSS preprocessors to build scalable and maintainable styles.

1

Create the Sass file with a :root selector

Write a Sass file that starts with a :root selector block. Inside it, create a CSS custom property called --width and set it to 200px.

SASS

:root {
  /* Create --width custom property with value 200px */
  /* Your code here */
}

Hint

Use :root { --width: 200px; } to define the custom property.

2

Import the built-in math module with @use

Add a line at the top of the Sass file to import the built-in math module using @use "sass:math";.

SASS

@use "sass:math";

:root {
  --width: 200px;
  /* Your code here */
}

Hint

Use @use "sass:math"; at the very top of the file.

3

Create a new custom property --half-width using math.div()

Inside the :root selector, add a new CSS custom property called --half-width. Set its value to half of 200px by using math.div(200, 2) with math.div().

SASS

@use "sass:math";

:root {
  --width: 200px;
  /* Create --half-width using math.div(200, 2) */
  /* Your code here */
}

Hint

Use interpolation #{} to insert the result of math.div(200, 2) and add px after it.

4

Complete the Sass file with correct syntax

Ensure the Sass file starts with @use "sass:math"; and contains the :root selector with both --width and --half-width custom properties defined correctly.

SASS

@use "sass:math";

:root {
  --width: 200px;
  --half-width: #{math.div(200, 2)}px;
  /* Your code here if needed */
}

Hint

Check that the file has the import and both custom properties inside :root.