Auto generate css variables by SASS function

Question

I want to ask how I can auto-generate css variable by sass function

for example: I want this variable to auto-generate

:root{--sample1:red;}

SASS function:

@function brand($key,$val) {
 //this not works  
 :root{
    --#{$key}:$val;
  }
@return val(--#{$val});}

use the brand function

   header{
       background-color:brand("sample1",red)
   }

That doesn't clarify anything. Give us the input and expected output and the method you wish to use. Do you mean by using a preprocessor? How should it auto-generate? — Bram Vanroy
– Bram Vanroy, Commented Oct 23, 2018 at 11:09
Atleast your var(--#{$val}) is wrong as it should be #{$key} — SuperDJ
– SuperDJ, Commented Oct 23, 2018 at 11:31
This guy uses maps to create something similar. His approach is interesting and maybe it helps you to find a better way to resolve your problem: codepen.io/jakealbaugh/post/css4-variables-and-sass — ReSedano
– ReSedano, Commented Oct 23, 2018 at 11:54

T. Torquati · Accepted Answer · 2020-01-23 12:01:22Z

5

I achieved something similar, here is the idea.

$spacing: (
  none: none,
  01: 4px,
  02: 8px,
  03: 16px,
  04: 24px,
  05: 32px,
  06: 40px,
  07: 48px,
  08: 56px,
  09: 64px,
  10: 72px,
  11: 80px,
  12: 88px,
  13: 96px
);

:root {
  // SPACING Custom Properties
  @each $space, $value in $spacing {
    --spacing-#{$space}: #{$value};
  }
}

answered Jan 23, 2020 at 12:01

T. Torquati

881 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Auto generate css variables by SASS function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related