Introduction

If you're a web developer or designer working with Sass (Syntactically Awesome Style Sheets), you've probably heard about the handy features @use and @forward. Introduced in Sass 3.9, these directives have become a game-changer for organising and managing styles in complex projects. In this blog post, we'll explore why @use and @forward are so useful and provide practical examples to demonstrate their power.

Simplify Dependency Management

One of the primary advantages of @use and @forward is their ability to simplify the way you manage dependencies. In traditional Sass, the @import directive could lead to a tangled web of dependencies, resulting in bloated and hard-to-maintain codebases. @use, on the other hand, provides a clear way to import only the specific members (variables, mixins, and functions) you need from other Sass modules.

Example:

Consider you have a color utilities module (_colors.scss) that defines various color variables, like $primary-color, $secondary-color, etc. Instead of importing the entire module with @import, you can selectively import just the required colors:

Copycopy code to clipboard
1// _colors.scss
2$primary-color: #007bff;
3$secondary-color: #6c757d;
4$tertiary-color: #28a745;
5// ...
6
7// main.scss
8@use 'colors' with (
9  $primary-color,
10  $secondary-color
11);
12
13body {
14  background-color: colors.$primary-color;
15  color: colors.$secondary-color;
16}

Simplify Dependency Management

Modularising your Sass code is crucial for maintainability and reusability. The @use directive encourages this modular approach by creating namespaces for imported members, avoiding naming collisions and making your codebase more organised.

Example:

Let's say you have a typography module (_typography.scss) with various typography-related mixins and functions. You can use @use to create a namespace for the typography module:

Copycopy code to clipboard
1// _typography.scss
2@mixin heading($size) {
3  font-size: $size;
4  // ...
5}
6
7// main.scss
8@use 'typography' as typography;
9
10h1 {
11  @include typography.heading(24px);
12}
13
14h2 {
15  @include typography.heading(20px);
16}

Facilitate Forwarding

@forward allows you to expose certain Sass members from one module to another, without having to re-implement them. This feature helps in building robust and composable APIs, making it easier for different parts of your codebase to communicate effectively.

Example:

Consider two separate modules: _buttons.scss and _forms.scss. If the buttons module has a useful mixin called .btn-primary, you can forward it to the forms module using @forward:

Copycopy code to clipboard
1// _buttons.scss
2@mixin btn-primary {
3  // Button styles...
4}
5
6// _forms.scss
7@forward 'buttons' show btn-primary;
8
9// main.scss
10@use 'forms';
11
12.my-form {
13  @include forms.btn-primary;
14}

Lets get slightly more complex

1. You have a folder structure with separate Sass files for each component (e.g., _navbar.scss, _buttons.scss, _basket.scss, _order.scss, _footer.scss, etc.).
2. You have a main.scss file that imports and uses these modules.

Copycopy code to clipboard
1// _buttons.scss
2// _colors.scss
3$primary-color: #007bff;
4$secondary-color: #6c757d;
5
6// _buttons.scss
7@mixin btn-primary {
8  background-color: $primary-color;
9  color: #ffffff;
10  padding: 10px 20px;
11  border: none;
12  border-radius: 5px;
13  cursor: pointer;
14}
15
16// _navbar.scss
17.navbar {
18  background-color: $secondary-color;
19  // ...
20}
21
22// main.scss
23@use 'colors';
24@use 'buttons' as buttons;
25@use 'navbar';
26
27body {
28  font-family: Arial, sans-serif;
29}
30
31.navbar {
32  @include buttons.btn-primary;
33}

Encourage Modularisation:

Copycopy code to clipboard
1// _typography.scss
2@mixin heading($size) {
3  font-size: $size;
4  // ...
5}
6
7// _basket.scss
8.basket {
9  border: 1px solid $primary-color;
10  // ...
11}
12
13// _order.scss
14.order {
15  background-color: $secondary-color;
16  // ...
17}
18
19// main.scss
20@use 'typography';
21@use 'basket';
22@use 'order';
23
24.basket-name {
25  @include typography.heading(18px);
26}
27
28.order-item {
29  @include typography.heading(16px);
30}

Facilitate Forwarding:

Copycopy code to clipboard
1// _forms.scss
2@forward 'buttons' show btn-primary;
3
4// _footer.scss
5@forward 'buttons' as footerButtons show btn-primary;
6
7// main.scss
8@use 'forms';
9@use 'footer';
10
11.my-form {
12  @include forms.btn-primary;
13}
14
15.footer {
16  @include footer.footerButtons;
17}

Conclusion:

In this more complex example, we have a comprehensive folder structure for our components, each managed in their respective Sass files. The @use and @forward directives enable us to selectively import the necessary styles and components from different modules, avoiding naming conflicts and keeping the codebase organized.

The color variables defined in _colors.scss are shared across various components, making it easy to maintain a consistent color scheme. The typography styles are separated into their own module, promoting reusability throughout the project.

The @forward directive also allows us to expose mixins from one module to another, enabling the sharing of common styles between different components. For example, the .btn-primary mixin from _buttons.scss is used in both the _forms.scss and _footer.scss modules, eliminating the need for code duplication.

In conclusion, @use and @forward play a vital role in simplifying, modularizing, and reusing styles in more complex Sass projects, ultimately leading to a cleaner and more efficient codebase. As projects grow in size and complexity, harnessing the power of these directives becomes increasingly crucial to maintainable and scalable stylesheets.