Question

我正在尝试使用变量来反转变暗/变亮颜色函数的简单方法。像这样......

$invert_switch: off;

和...

@if $invert_switch == "on" {
    darken == lighten
    lighten == darken
} @else {
    darken == darken
    lighten == lighten
}

我知道这不是正确的代码，我只是想简单地解释一下。

如果使用了这个......

background: darken($bg, 10%);
color: lighten($txt, 50%);

我怎么能翻转它，所以它会......

background: lighten($bg, 10%);
color: darken($txt, 50%);

或许有一种更简单的方法？

Answer 1

我尝试更改函数darken和lighten的名称，但我不能。我发现的问题是SASS没有类似@break或@continue的东西退出函数而什么都不做，我的想法是下面的代码但是当自定义函数与SASS函数重合时无限循环：

$invert_switch: on;

@function darken($color, $amount){
  @if $invert_switch == on {
    @return lighten($color, $amount);
  }
  @else {
    @return darken($color, $amount);
  }
}

@function lighten($color, $amount){
  @if $invert_switch == on {
    @return darken($color, $amount);
  }
  @else {
    @return lighten($color, $amount);
  }
}


h1{
  color: darken(red, 10%);
}

p{
  color: lighten(red, 10%);
}

我更改了添加下划线的函数的名称：

$invert_switch: on;

@function _darken($color, $amount){
  @if $invert_switch == on {
    @return lighten($color, $amount);
  }
  @else {
    @return darken($color, $amount);
  }
}

@function _lighten($color, $amount){
  @if $invert_switch == on {
    @return darken($color, $amount);
  }
  @else {
    @return lighten($color, $amount);
  }
}


h1{
  color: _darken(red, 10%);
}

p{
  color: _lighten(red, 10%);
}

也许有人可以使用正确的函数名称来改进此代码

Sass - 通过变量反转Lighten / Darken函数的方法？

1 个答案: