Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/android/201.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Sass-通过变量反转变亮/变暗功能的方法?_Sass - Fatal编程技术网

Sass-通过变量反转变亮/变暗功能的方法?

Sass-通过变量反转变亮/变暗功能的方法?,sass,Sass,我在想一个简单的方法,用一个变量来反转变暗/变亮的颜色函数。大概是这样的 $invert_switch: off; 而且 @if $invert_switch == "on" { darken == lighten lighten == darken } @else { darken == darken lighten == lighten } 我知道这不是正确的代码,我只是想简单地解释一下 如果用这个 background: darken($bg, 10%)

我在想一个简单的方法,用一个变量来反转变暗/变亮的颜色函数。大概是这样的

$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%);

或者有更简单的方法吗?

我试图更改函数的名称
变暗
变亮
,但我做不到。我发现的问题是,SASS没有类似于
@break
@continue
的东西退出函数而不执行任何操作,我的想法是使用以下代码,但当自定义函数与SASS函数一致时,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%);
}
也许有人可以使用函数的专有名称来改进这段代码