Sass — Modules

@use rule

@use 'variables';
@use 'mixins';

body {
  color: variables.$primary;
  @include mixins.flex-center;
}

Namespaces

@use 'variables' as v;
@use 'mixins' as m;

.button {
  background: v.$primary;
  @include m.flex-center;
}

Private members

// _variables.scss
$-private: red; // Private - not importable
$public: blue;  // Public - importable with _

@forward rule

// _index.scss
@forward 'variables';
@forward 'mixins';
@forward 'functions';

Now you can import everything at once:

@use 'index' as *; // All members available directly

Configuring modules

// _config.scss
@use 'variables' with (
  $primary: #e74c3c,
  $spacing: 20px
);

Module organization

// src/scss/
//   _variables.scss
//   _mixins.scss
//   _functions.scss
//   _base.scss
//   _components.scss
//   _utilities.scss
//   main.scss

// main.scss
@use 'variables';
@use 'mixins';
@use 'functions';
@use 'base';
@use 'components';
@use 'utilities';

Built-in modules

@use 'sass:math';
@use 'sass:color';
@use 'sass:list';
@use 'sass:map';
@use 'sass:meta';
@use 'sass:string';

.result {
  width: math.percentage(1 / 3);
  color: color.adjust(#3498db, $lightness: 10%);
}

Multiple @use

@use 'variables' as v;
@use 'mixins' as m;
@use 'functions' as f;

Mini Practice

1. Organize a project with @use and @forward
2. Create a module index file
3. Use namespaces to avoid conflicts
4. Practice with built-in modules

Up Next

Continue with Partials — splitting code into files.