Using css variables correct way

Question

I have a requirement to use css variables:

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

Which is showing as

ul{ background-color: var(--main-bg-color);}

Can't seem to figure out where I am going wrong because of which it is not giving me the correct value. Expected is:

ul {background-color: brown;}

Answer 1

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.