When you define a variable in SCSS (Sass) and change the value of it, the value gets overwritten.
If you want to set the variables value dynamically using an user input, there is a way.
You can use !default flag to do so.
The !default flag only assigns a value to a variable if the variable is not defined or the value for the variable is null.
It is basically like adding an if-else statement but in a really short and quick way.
You can configure variables with !default flag when you load a module using @use rule.
To do so, write @use with (: , : ). The new values in configuration will override the default values.
You need to write those variables with !default tag at the top of the stylesheet. Only those variables will be configured.
Example
// _alert.scss
$border-radius: 10px !default;
.alert {
border-radius: $border-radius;
}
// style.scss
@use 'alert' with (
$border-radius: 15px
);
Compiled CSS
.alert {
border-radius: 15px;
}
default examples sass values
