css - 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);

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

Answer 1

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

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

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

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