CSS Variable & SCSS Mixin

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();

Using css variables correct way

I think you're mixing (no pun intended) CSS up with SASS/SCSS or other CSS pre-processors.

@mixin is used by CSS pre-processors and not native CSS. In that case you declare mixins the way you're doing, and variables like:

$main-bg-color: brown;

@mixin themeChanges-background {
  background-color: $main-bg-color;
}

.classOne {
  ul {
    @include themeChanges-background;
  }
}

In native CSS, mixins are done just like your other variables:

:root {
  --main-bg-color: brown;
  --themeChanges-background: {
    background-color: var(--main-bg-color);
  }
}
.classOne {
  ul {
      @apply --themeChanges-background;        
  }
}

There's just one little catch, @apply is an experimental feature and isn't supported by any browsers out of the box. You can enable it in Chrome with the "Experimental web platform features" feature flag if you really want. I recommend sticking with SASS or SCSS though if you want any one else to see your styles.

Using scss variable inside css variable

you need to escape that scss function like so:

$colors: (
        'black' : #000000,
        'white' : #FFFFFF,
        'blue' : #888888
);

:root {
  --blue: #{map-get($colors, 'blue')}
}

body {
  color: var(--blue);
}

Update:
it's basically string interpolation that is needed.

---

Related Topics