@use directive for imports in SASS - Mini Project: Build & Apply

@use directive for imports in Sass

📖 Scenario: You are building a simple website style using Sass. You want to organize your styles by splitting colors and typography into separate files. Then you will import these files into a main stylesheet using the modern @use directive.

🎯 Goal: Create two Sass partial files named _colors.scss and _typography.scss with variables. Then use the @use directive in styles.scss to import them and apply the styles to the body.

📋 What You'll Learn

Create a partial file _colors.scss with a variable $primary-color set to #3498db.

Create a partial file _typography.scss with a variable $font-stack set to 'Helvetica, Arial, sans-serif'.

In styles.scss, use the @use directive to import both partials.

Apply the imported variables to style the body background color and font family.

💡 Why This Matters

🌍 Real World

Organizing CSS styles in large projects by splitting variables and styles into separate files improves maintainability and collaboration.

💼 Career

Modern front-end developers use Sass with <code>@use</code> to write scalable and clean stylesheets for websites and applications.

1

Create _colors.scss with a color variable

Create a Sass partial file named _colors.scss and define a variable called $primary-color with the value #3498db.

SASS

// Define $primary-color variable here
// Your code here

Need a hint?

Start with $primary-color: then add the color #3498db and end with a semicolon.

2

Create _typography.scss with a font variable

Create a Sass partial file named _typography.scss and define a variable called $font-stack with the value 'Helvetica, Arial, sans-serif'.

SASS

// Define $font-stack variable here
// Your code here

Need a hint?

Use $font-stack: then the font family string in quotes and a semicolon.

3

Import partials in styles.scss using @use

In styles.scss, write two @use directives to import _colors.scss and _typography.scss partials.

SASS

// Use @use to import _colors.scss
// Use @use to import _typography.scss
// Your code here

Need a hint?

Use @use 'colors'; and @use 'typography'; to import the partials without the underscore or extension.

4

Apply imported variables to style the body

In styles.scss, add a body selector that sets background-color to colors.$primary-color and font-family to typography.$font-stack.

SASS

@use 'colors';
@use 'typography';

// Add body selector with background-color and font-family using imported variables
// Your code here

Need a hint?

Use the namespace from @use followed by the variable name with a dot, like colors.$primary-color.