Question

我希望拥有不同的css属性值（我正在使用SASS），具体取决于具有特定属性的元素＆＃39; $ additionalNavHeight ＆＃ 39;出现在页面上。在某些页面中没有这样的元素，在其他页面中 - 有。我写了一篇SASS mixin：

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

我将mixin包含在选择器中：

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

我认为这应该会改变该属性的价值＆＃39; top ＆＃39;类似于＆＃39; loadingAnimation ＆＃39;的元素，如果在页面中已经存在，则元素的值为＆＃39; top ＆＃39;物业＆＃39; $ additionalNavHeight＆＃39;。编译器没有显示任何错误，但代码没有任何改变。我究竟做错了什么？任何帮助都将非常感激。

Answer 1

最简单的解决方案。如果元素存在与否，则必须使用JavaScript进行检查并将第二个类应用于元素。在第二种情况下（元素存在）你必须添加adittionnal高度。在这种情况下，mixin是多余的。

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

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

编辑：这是第二个改进的解决方案。事实上，没有必要进行正则表达。我们可以使用classList： https://jsfiddle.net/ra9r8rk8/1/

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

1 个答案: