Sharing variables between shared files using @use

Question

Currently migrating from sass to dart-sass. Using @use and @forward is not a problem for any *.scss file outside shared folder.

Problem: When to stylesheets/shared/_variables.scss add @use "functions" as *; as it uses function example-ui-color, getting:

Question:
Is there some different approach to achieve this?

Error: Module loop: this module is already being loaded.
  ┌──> app/assets/stylesheets/shared/_functions.scss
1 │ @use "variables" as *;
  │ ^^^^^^^^^^^^^^^^^^^^^ new load
  ╵
  ┌──> app/assets/stylesheets/example/example.scss
1 │ @use "shared/variables" as *;
 |   │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━ original load
 |   ╵
 |   shared/_functions.scss 1:1                        @use
 |   shared/_variables.scss 3:1                        @use
 |   app/assets/stylesheets/example/example.scss 1:1  @use
 |   app/assets/stylesheets/application.scss 2:1       root stylesheet

File structure:

stylesheets/shared/
  _functions.scss
  _mixins.scss
  _variables.scss
stylesheets/example/
  example.scss
stylesheets/application.scss

// stylesheets/shared/_functions.scss

@use "variables" as *;
@use "sass:map";

@function example-ui-color($color, $variant: 'normal') {
  @return map.get(map.get($example-ui, $color), $variant);
}

// stylesheets/shared/_mixins.scss

@use "variables" as *;
@use "sass:list";
@use "sass:map";

@mixin break($size) {
  @media (min-width: map.get($breakpoints, $size)) {
    @content;
  }
}

// stylesheets/shared/_variables.scss
@use "functions" as *; // when add this, error happens

$example-ui: (
  'grey':   ('lightest': #eeeeee, 'light': #d2d2d2, 'normal': #c1c1c1, 'dark': #999, 'darkest': #3a3a3a),
  'green':  ('lightest': #d7e8c4, 'light': #bde093, 'normal': #6cc04a, 'dark': #28a834, 'darkest': #00833e),
  'blue':   ('lightest': #cce5f4, 'light': #b6c2e9, 'normal': #62b3e5, 'dark': #0b3486, 'darkest': #071d49),
  'red':    ('lightest': #f7eae4, 'light': #f0b3ca, 'normal': #e45385, 'dark': #dd3a76, 'darkest': #f9423a),
  'orange': ('lightest': #ffe1c6, 'light': #ffbe85, 'normal': #f78d2d, 'dark': #e57a18, 'darkest': #d75f00),
);

$breakpoints: (
  xs: 360px,
  sm: 768px,
  md: 992px,
  lg: 1024px
);

$footer_border_top: example-ui-color('blue', 'darkest');

$gap: 16px;

// stylesheets/example/example.scss

@use "shared/variables" as *;
@use "shared/mixins" as *;
@use "shared/functions" as *;

li.responsible-contact a {
  border: 1px solid example-ui-color('grey', 'normal');
}

score 1 · Accepted Answer · answered Aug 14 '22 at 12:01

You are using advanced Sass concepts that I don't use myself but something is quite obvious here :

_functions.scss partial uses variables
_variables.scss partial uses functions

It is recursive and you end up in a loop. Basically you have to shape your partials in a way they don't rely on each other.

for example I have a folder abstracts which contains the following partials :

_colors.scss
_mixins.scss
_responsive.scss
_values.scss

And none of them uses any other partial. Because each of these partials do their own job. For example Colors have only color variables ... They are basically atomic.

Maybe you can rethink the way you design your SCSS framewok to have it work without any recursion

One idea is to create a higher level partial that would uses many partials from your shared folder and use this partial instead of the children partials independently.

Ha, got this in mind as lost resort, but lets simplify things and move on. :) Moved only one variable what was used in _functions.scss to _functions.scss and now function not depends from _variables.scss — Goaul, Aug 14 '22 at 15:22
I think you try to sort out your partials by what they are. Like the partial `functions` hold every function. Yet it would be better to sort them by topic : `colors`, `layout` ... So you are allowed to use functions alltogether with variables ... — Maxence, Aug 14 '22 at 15:27

Sharing variables between shared files using @use

1 Answers1