css - SASS - 当类被激活时 - 换一个

Question

在我的 SASS 文件中，我有一些用于光滑轮播和加载微调器的样式。

当 slick-initialized 类出现时，是否可以在微调器上设置 display:none。

例如 - 来自:

slick.slick-initialized {
  display: block;
}

类似于:

slick.slick-initialized {
      display: block;

      &.spinner { display none };
}

我有:

<div class="row">

      <div class="spinner"></div>

      <slick init-onload=true data="qNew" dots=true arrows=false>
        <div class=“tile" ng-repeat="question in questionsNew">
          <span ng-bind-html="question.question"></span>
        </div>
      </slick>

</div>

Answer 1

如果 .spinner 元素紧跟在 .slick 元素之后

你可以写SCSS

SCSS

 slick.slick-initialized {
          display: block;
          + .spinner { display none };
    }

HTML

<div class="row">       

      <slick init-onload=true data="qNew" dots=true arrows=false>
        <div class=“tile" ng-repeat="question in questionsNew">
          <span ng-bind-html="question.question"></span>
        </div>
      </slick>
    <div class="spinner"></div>

</div>

将 ..spinner 元素放在 slick 元素之后并使用 above scss