@if 属性存在于 SASS

Question

我正在尝试让类似于此 SASS 代码的东西起作用；

.alert-danger {
  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
  @include transition(ease-in-out, 95ms, all);
    @if data-interaction == true {
      &:hover,
      &:focus {
        @include alert-variant-interactive($alert-danger-bg, $alert-danger-border, $alert-danger-text); 
      }
    }
}

不过，我找不到检查 "if" 某些属性或 class 存在于 .alert-danger 中的好方法。我真的很想保持悬停嵌套，而不必编写额外的块。

现在我在 .alert-danger 元素上使用 data-interaction="true"。

提前致谢！

Answer 1

我找到的解决方案

很高兴我确实找到了自己的解决方案，所以我将其张贴在这里以防其他人遇到同样的问题！

代码应该是这样的，而不是上面写的：

.alert-danger {
  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
  @include transition(ease-in-out, 95ms, all);
    &[data-interaction="true"] {
      &:hover,
      &:focus {
        @include alert-variant-interactive($alert-danger-bg, $alert-danger-border, $alert-danger-text); 
      }
    }
}

我更改了我使用的 @if 指令 &[data-attribute="true"]，它附加了嵌套值编译所需的属性。 :)

同样，对于上面的陈述；是的，它是一个预处理器，但这当然意味着如果 CSS 可以做某事，那么 SASS 肯定可以做。所有的问题都是找到正确的方法。 :)

@if 属性存在于 SASS

@if Attribute Exists in SASS

if-statement

attributes

sass

exists

nested

我找到的解决方案