How to Set SCSS Variable to CSS Variable

How to Assign CSS Variable Value to scss Variable or Expression

CSS and SCSS variables are two very different things (please see this pen)

To make it work you need a static variable for SCSS to compile

// static (SCSS) variables used produce CSS output
$page-width: 1170px;
$gutter : 15px
$columns: 12;  

// dynamic (CSS) variables used at run-time
// note the values are interpolated 
:root {
  --page-width: #{$page-width};
  --gutter : #{$gutter};
  --columns: #{$columns};
}

//  the for loop is aimed at producing CSS output
//  ... why you need the static variable
@for $n from 1 through $columns {  
  
  //  the content becomes CSS output
  //  ... why you can use dynamic variables   
  .col-#{$n} {width: calc( #{$n} / var(--columns) - var(--gutter) * 2 ); }

}

Unable to set SCSS variable to CSS variable?

Just use string interpolation:

$color-black: #000000;

body {
    --color: #{$color-black};
}

Apparently the old behaviour is not intended and violated the language specs of SASS:

• CSS variables mixed with SCSS variables don't emit proper CSS in 4.8+
• CSS variables aren't properly compiled
• Assigning SASS variables to CSS Variables (Custom Properties) no longer works

Loop over a sass/scss variable to generate css variables

Change your loop as below. Notice I replaced $val by #{$val}:

:root {
  @each $key, $val in $grid-breakpoints {
    --breakpoint-#{$key}: #{$val};
  }
}

The syntax #{…} is called interpolation and it is the only way to inject dynamic values into a CSS variable (custom property). Here is a quote from the doc:

CSS custom properties, also known as CSS variables, have an unusual declaration syntax: they allow almost any text at all in their declaration values. What’s more, those values are accessible to JavaScript, so any value might potentially be relevant to the user. This includes values that would normally be parsed as SassScript.

Because of this, Sass parses custom property declarations differently than other property declarations. All tokens, including those that look like SassScript, are passed through to CSS as-is. The only exception is interpolation, which is the only way to inject dynamic values into a custom property.

$primary: red;
:root {
  --primary: #{$primary}; // this one works
  --primary: $primary;    // this does not
}

Using SASS/SCSS to generate CSS variables

To give a general overview, the syntax #{…} is called interpolation and it is the only way to inject dynamic values into a CSS variable (custom property). Here is a quote from the doc:

CSS custom properties, also known as CSS variables, have an unusual declaration syntax: they allow almost any text at all in their declaration values. What’s more, those values are accessible to JavaScript, so any value might potentially be relevant to the user. This includes values that would normally be parsed as SassScript.

Because of this, Sass parses custom property declarations differently than other property declarations. All tokens, including those that look like SassScript, are passed through to CSS as-is. The only exception is interpolation, which is the only way to inject dynamic values into a custom property.

$primary: red;
:root {
  --primary: #{$primary}; // this one works
  --primary: $primary;    // this does not
}

The error you made is to put the -- inside the interpolation curly brackets ({}). This would work:

@mixin theme() {
  @each $theme, $map in $themes {
    @if $theme == "default" {
      :root {
        @each $key, $value in $map {
          --#{$key}: #{$value};
        }
      }
    } @else {
      [data-theme="#{$theme}"] {
        @each $key, $value in $map {
          --#{$key}: #{$value};
        }
      }
    }
  }
}

@include theme();

Can't assign sass variable to css variable

This being invalid syntax is intended, the solution is to use:

$color1: 

.App {
  --color1: #{$color1};
}

The reason for this is discussed here: https://github.com/sass/libsass/issues/2621

In short, css variables could potentially be a string that starts with a $ character, and Sass did not want to block that syntax from working. Given that #{$someVar} is not valid css syntax, it is functional and more explicit to have it be this way.

---

Related Topics