How to set the value of one predefined SASS variable to another predefined SASS variable

[nandac]

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [1.0.1] My browser is: Google Chrome This is a Sass issue: I'm using version [1.77.8]

Description

When I was using Bulma 0.9.4 I could customise colors using Bulma's predefined colours for example something like this: $body-background-color: $grey

With Bulma 1.0.1 I have code like the following:

@use "../bulma-1.0.1/sass/utilities" with (
    $body-background-color: $grey
);

but when I compile it with SASS I get the following error:

Error: Undefined variable.
 ╷
2│     $body-background-color: $grey
 │                             ^^^^^
make: *** [scss] Error 65

I can set $body-background-color to a literal color, or a Bulma pre-defined CSS variable but not a pre-defined SASS variable.

I know I probably do not understand how this works now in the new version and need some help to understand and how to do thi now.

Steps to Reproduce

Use the following code below in scss file and compile with sass:

@use "bulma/sass/utilities" with (
    $body-background-color: $grey
);

Expected behaviour

$grey should be available when I compile and not throw an error.

Actual behaviour

when I compile it with SASS I get the following error:

Error: Undefined variable.
 ╷
2│     $body-background-color: $grey
 │                             ^^^^^
 ╵
make: *** [scss] Error 65

[SebConejo]

@nandac Same problem. Did you find another solution thant going back to bulma 0.9 ?

[nandac]

@SebConejo I have not found a way to do this, and I believe it is because the @use and @forward directives in CSS expect literal values and do not quite understand SASS variables. I may be wrong but this is what I think is happening.

That said we can still use the old way of:

$body-background-color: $grey

Just not inside an @use or at @forward block.

Hope that helps.

[alidrus]

I honestly don't know if this is the recommended way but with some trial and error I managed to get this to work in my _custom.scss:

.navbar-item.is-active {
  color: var(--bulma-white-bis);
  border-radius: 10px;
}

So in your case, try using var(--bulma-grey) and see if that helps.