CODEWITHSUNDEEP
sass
Joakim Poromaa Helger
Joakim Poromaa Helger

Reputation: 13

global var update from scss function

I have a scss function

@function darken($color,$percent) {
  ...
  @return $calculated-color;
}

This function overrides the darken() function, but adds some extra features. Now, I wonder if it is possible to somehow store all calls to this function in some map and then after all function calls has been made run that map trough a mixin such as:

$calc-colors:() !global;
$calc-colors:map-merge(('thisvaluewillbeexported':1),$calc-colors);

@function test($color,$percent) {
  $col: darken($color,$percent);
  // $calc-colors: append($calc-colors,'--'$color);           --not working
  // $calc-colors:map-merge(('--'+$color:$col),$calc-colors);   --not working
  @return $col;
}

.test {
  color:test(pink,24%);
}

.test2 {
  color:test(red,24%);
}

:export{
  @each $bp, $value in $calc-colors {
    #{$bp}: #{$value};
  }
}
//gives only thisvaluewillbeexported:1

My goal would to somehow get all calls to my test function recorded into the :export{} attribute in order to be able to fetch the values from javascript.

// My preferred output would be:

{
'thisvaluewillbeexported':1,
'--pink':'#ff4666',
'--red':'#850000'
}

Upvotes: 1

Views: 129

Answers (1)

3rdthemagical
3rdthemagical

Reputation: 5350

You should set variable !global inside function.
Sassmeister demo.
Article about variable scope in Sass.

@function set-color($color-name, $darken-ration) {
  $darken-color: darken($color-name, $darken-ration);

  $calc-colors: map-merge($calc-colors, ('--' + $color-name: $darken-color)) !global;

  @return $darken-color;
}

$calc-colors: map-merge(('thisvaluewillbeexported': 1), ());

a {
  color: set-color(green, 10%);
}

b {
  color: set-color(red, 10%);
}

c {
    @each $name, $value in $calc-colors {
    #{$name}: #{$value};
  }
}

Css output: 

a {
  color: #004d00;
}

b {
  color: #cc0000;
}

c {
  thisvaluewillbeexported: 1;
  --green: #004d00;
  --red: #cc0000;
}

Upvotes: 1

Related Questions