Default variable overwrite

[eduarddotgg]

Hi! It would be great if there was something familiar with sass default variables especially when using postcss-import. so for example you have one css file where you make some css and define some variables. than you import this file to another one where default variables will be overwritten with other ones.

[MadLittleMods]

I assume you mean the Sass !default keyword.

You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.

Source

We already support fallback values, so you can get the same functionality.

.foo {
    /* Provide a fallback */
    background: var(--non-existent, #ff0000);
}

Here is an example given in the Sass !default docs:

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
    content: $content;
    new-content: $new_content;
}

Here is the equivalent with postcss-css-variables:

:root {
    --content: "First content";
    --content: var(--content, "Second content?");
    --new-content: var(--new-content, "First time reference");
}

#main {
    content: var(--content);
    new-content: var(--new-content);
}

Outputs:

#main {
    content: "First content";
    new-content: "First time reference";
}

[eduarddotgg]

Thank you for your help!