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';