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%);
}
也许有人可以使用函数的专有名称来改进这段代码