SASS - 将新的$变量及其值创建为新的$变量

时间:2015-01-09 07:57:39

标签: variables sass interpolation

我想要实现的是,取每个$变量并将它们放在一个混合白色和颜色$ var的函数中,使它更轻一些。

由于到目前为止我对sass缺乏了解,所以我无法做到这一点。

所以问题是:

为什么我能够在插值时为我的插值制作$?

是实现这一目标的更好方法吗?

$red     : #F4493C;
$blue    : #2196F3;
$white   : #FFFFFF;
$red-50  : #ffcccc; // <-- this is what it should result in...

$colors:(
  red,
  blue
);

/* how the function should work
@function colortint($color, $white, $amount){
  @return mix($color, $white, $amount);
}
*/

@function colortint($color, $white){
  @return mix($color, $white, 20%);
}

body {
  background-color: colortint($red, $white);  
}

@each $color in $colors {
.#{$color} {
   background-color: colortint($color, $white); // giving it a classworks
  }
}

/* this is what i want
@each $color in $colors {
  ${$color}-50 : colortint($color, $white, 20%); // why can't i make it a variable
}
*/

0 个答案:

没有答案