Question

我有scss功能

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

此函数会覆盖darken（）函数，但会添加一些额外的功能。现在，我想知道是否有可能以某种方式将所有对此函数的调用存储在某个映射中，然后在完成所有函数调用之后，通过mixin运行该映射，例如：

$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

我的目标是以某种方式将我的测试函数的所有调用记录到：export {}属性中，以便能够从javascript中获取值。

＆＃13;

// My preferred output would be:

{
'thisvaluewillbeexported':1,
'--pink':'#ff4666',
'--red':'#850000'
}

＆＃13;

Answer 1

你应该在函数内部设置变量!global Sassmeister demo。
Article关于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输出：

a {
  color: #004d00;
}

b {
  color: #cc0000;
}

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

scss函数的全局变量更新

1 个答案: