@if 属性存在于 SASS [重复]答案

【问题标题】：@if Attribute Exists in SASS [duplicate]@if 属性存在于 SASS [重复]
【发布时间】：2015-06-10 09:15:27
【问题描述】：

我正在尝试让与此 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); 
      }
    }
}

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

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

提前致谢！

【问题讨论】：

你明白 Sass 永远不会发送到浏览器，对吧？
您好。有点草率的评论。 :P 但是，是的，我知道它是 CSS 的预处理器。但这就是我的观点； CSS 可以使用属性来指定某些元素。我不能用 SASS 这样做吗？ LESS（我很确定，如果我没记错的话）确实有办法做到这一点，尽管我相信它是通过使用 less.js。所以我想我的问题可能是； SASS 是否有 sass.js 或一些解决方法来支持这一点？
你应该问一个更好的问题。 Sass只能直接编译成 CSS。
是的，我确实看到了，但 4 年前有人问过，SASS 刚刚推出了升级，所以我希望可能有不同的解决方案。
也许我应该换个说法。 ^_^ 但我非常感谢建议做得更好，而不是一个简短的评论告诉我我只是做错了事。请让我知道一个更好的提问方式，以便我改变它。 :) 是的，正如我之前所说，我知道它是一个预处理器。

标签： if-statement attributes sass exists nested

【解决方案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); 
      }
    }
}

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

再次，对于上面的陈述；是的，它是一个预处理器，但这当然意味着如果 CSS 可以做某事，SASS 肯定可以做到。一切都是为了找到正确的方法。 :)

【讨论】：

请不要仅仅因为某个未知原因对一个完全陌生的人感到不安而对可以帮助他人的解决方案投反对票。 ^_^ 这可能对其他有类似问题的用户有所帮助。