首页 文章

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

提问于
浏览 次
3

我想拥有不同的css属性值（我正在使用SASS），基于页面上是否存在具有特定属性's value ' $ 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);

我认为这应该更改属性的值'top ' of the element with the class ' loading', based on that if in the page already is present the element with the value of its ' top ' property ' $ additionalNavHeight '. The compiler doesn' t显示任何错误，但代码不会改变任何内容 . 我究竟做错了什么？任何帮助将非常感激 .

css sass mixins

1 回答

  • 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/

    回复于

相关问题