如果在 scss 中输入为空，如何禁用或忽略代码

Question

我的 _dip.scss 文件中有这样的代码：

#g-dip {
    @if $dip-background-style == 'bg-color' {
        background: $dip-bg-color;
    }
}

如果启用颜色选项，它会使用从颜色输入字段中选择的颜色制作背景颜色。如果在颜色模式下没有从颜色输入字段中选择颜色，那么它会像这样制作 css 代码：

background: false;

如何禁用

background: $dip-bg-color;

颜色模式启用但未从颜色输入字段中选择颜色时的代码？

我的意思是如果 $dip-background-style 启用但 $dip-bg-color 未从颜色输入字段定义，我想删除或排除 background: $dip-bg-color; 代码。

我用过那个：

#g-dip {
    @mixin color {
    background: $dip-bg-color;
    }
    
    @if $dip-background-style == 'bg-color' {
            @include color;
    @if $dip-bg-color == 'false' {
        background: #ff0000;
        }   
    }
}

这是在 background:false; 之后添加第二行，当颜色未定义时使背景颜色变为红色。

    background: false;
    background: #f00;

我想要这样的结果:

如果启用背景颜色模式($dip-background-style=bg-color) + 选择颜色($dip-bg-color=Defined) =

background:$dip-bg-color;

如果启用背景颜色模式($dip-background-style=bg-color) + 未选择颜色($dip-bg-color=Undefined or Null or False) =

Nothing to do for background

抱歉我的英语不好。

Answer 1

检查 $dip-bg-color 是否有值：


$dip-background-style: 'bg-color';
$dip-bg-color: false;

#g-dip {
    @if $dip-bg-color and $dip-background-style == 'bg-color' {
        background: $dip-bg-color;
    } @else {
        background: initial;
    }
}

Answer 2

通过添加 @if $dip-bg-color 规则作为父规则解决。

工作方式是：

@if $dip-bg-color {

   @if $dip-background-style == 'bg-color' {
        background: $dip-bg-color;
    }

如果在 scss 中输入为空，如何禁用或忽略代码

How to disable or ignore code if input is null in scss

css

null

if-statement

sass

undefined