Question

我试图获得与此SASS代码类似的功能;

＆＃13;

.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); 
      }
    }
}

＆＃13;

我无法找到一个好方法来检查＆＃34;如果＆＃34;但是，某些属性或类存在于.alert-danger中。我真的想保持悬停嵌套，而不必写额外的块。

现在我正在使用数据交互=＆＃34; true＆＃34;在.alert-danger元素上。

提前致谢！

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指令＆amp; [data-attribute =“true”]，它附加了嵌套值所需的属性以进行编译。：）

再次，对上述陈述;是的，它是一个预处理器，但当然这意味着如果CSS可以做某事，SASS肯定可以做到。所有这些都是找到正确的方法。：）

@if属性存在于SASS中

1 个答案:

我找到的解决方案