SASS：CSS 属性 的条件值基于如果具有相同 属性 的特定值的元素已经存在于页面中

Question

我想要 css 属性 的不同值（我正在使用 SASS），基于是否具有某个 属性 的元素页面上存在值“$additionalNavHeight”。在某些页面中没有这样的元素，在其他页面中 - 有。我写了一个 SASS mixin:

@mixin top-position($navHeight, $additionalNavHeight)
{ 
  @if $additionalNavHeight == true {
    .loadingAnimation {
      top: $navHeight + $additionalNavHeight;
    }
  } 
  @else {
    .loadingAnimation {
      top: $navHeight;
    }
  }
}

我在选择器中包含了 mixin：

@include top-position($navHeight, $additionalNavHeight);

我认为这应该更改带有 class 'loadingAnimation[ 的元素的 属性 'top' 的值=26=]'，基于如果页面中已经存在具有其值'top' 属性 '$additionalNavHeight' 的元素。编译器没有显示任何错误，但代码没有任何改变。我究竟做错了什么？任何帮助将不胜感激。

Answer 1

最简单的解决方案。您必须检查 JavaScript 元素是否存在 并将第二个 class 应用于元素。在第二种情况下（元素存在） 您必须添加额外的高度。在这种情况下，mixin 是多余的。

   .loadingAnimation {
      top: $navHeight;
    }
    .loadingAnimation.additinnalHeight {
      top: $navHeight + $additionalNavHeight;
    }

这是 jsfiffle 示例： https://jsfiddle.net/ra9r8rk8/ 在这种情况下，当第一个 div 存在时，元素将接收 class newClass。 （元素）

编辑：这是第二个改进的解决方案。实际上不需要正则表达式。我们可以只使用 classList： https://jsfiddle.net/ra9r8rk8/1/