Sass/SCSS Partials and Import

Organizing Sass code with partials

Partials

// _variables.scss (partial file starts with _)
$primary-color: #3498db;
$font-stack: Arial, sans-serif;

Import Partials

// main.scss
@import 'variables'; # import without _ and .scss
@import 'mixins';
@import 'base';

Use (Modern Syntax)

// Dart Sass @use
@use 'variables'; # import with namespace
.button {
    color: variables.$primary-color; # access with namespace
}

Use with Alias

@use 'variables' as v; # custom namespace
.button {
    color: v.$primary-color;
}

Forward

// _index.scss
@forward 'variables'; # make variables available
@forward 'mixins';