@forward directive for re-exporting in SASS - Mini Project: Build & Apply

@forward Directive for Re-exporting in Sass

📖 Scenario: You are organizing styles for a website. You want to keep your Sass files neat by grouping related styles into separate files and then combining them into one main file. This helps you manage colors and buttons easily.

🎯 Goal: Create multiple Sass partial files for colors and buttons, then use the @forward directive in an index file to re-export these styles. Finally, import the index file in the main Sass file to apply all styles.

📋 What You'll Learn

Create a partial Sass file named _colors.scss with two color variables.

Create a partial Sass file named _buttons.scss with a button style using a color variable.

Create an _index.scss file that uses @forward to re-export _colors.scss and _buttons.scss.

Create a main Sass file styles.scss that imports _index.scss.

The final CSS should style a button with the defined colors.

💡 Why This Matters

🌍 Real World

Organizing Sass files in a large project to keep styles modular and maintainable.

💼 Career

Front-end developers often use <code>@forward</code> to manage style libraries and share variables and mixins across components.

1

Create _colors.scss with color variables

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

SASS

// Your code here

Need a hint?

Use the syntax $variable-name: value; to create variables in Sass.

2

Create _buttons.scss with a button style using $primary-color

Create a partial Sass file named _buttons.scss, import colors using @use "colors" as *;, and write a style for .btn that sets background-color to $primary-color and color to white.

SASS

// Your code here

Need a hint?

Use @use "colors" as *; .btn { background-color: $primary-color; color: white; } to import variables and style the button.

3

Create _index.scss to re-export _colors.scss and _buttons.scss using @forward

Create a partial Sass file named _index.scss. Use the @forward directive to re-export _colors.scss and _buttons.scss.

SASS

// Your code here

Need a hint?

Use @forward "filename"; to re-export partials without the underscore or extension.

4

Create styles.scss to import _index.scss

Create a Sass file named styles.scss and import _index.scss using @use. This will apply all styles from colors and buttons.

SASS

// Your code here

Need a hint?

Use @use "index"; to import the re-exported styles.