css - 使用 Sass 更改类

Question

我正在尝试使标签变灰(成功并在最后 2 个框上推荐)并仅在它们悬停或处于事件状态时(第一个框)才将它们着色。

我使用灰色作为禁用状态，尽管它只是使用 css 设置了灰色样式。

我正在尝试使用 SASS 在纯 CSS 中执行此操作，而不是使用 css fitler，因为我需要针对 IE 浏览器。

我可以在 SASS 中创建一个 mixin 或一个 true 或 false 语句来取消设置一个灰色的类，以在父类或其他东西上显示其悬停或事件状态的颜色吗？

标签是自举的。

<div class="row">
        <div class="col-md-3">
          <div class="sau-select selected">
            <div class="header">
              <h4>Self Managed</h4>
              <p>label</p>
            </div>
            <div class="main">
              <div class="tag tag-success">Success</div>
              <p>Included</p>
            </div>
          </div>
        </div><!-- /col-md-3 -->

        <div class="col-md-3">
          <div class="sau-select error">
            <div class="header">
              <h4>Self Managed</h4>
              <p>&nbsp;</p>
            </div>
            <div class="main">
              <span>&nbsp;</span>
              <p>Included</p>
            </div>
          </div>
        </div><!-- /col-md-3 -->

        <div class="col-md-3">
          <div class="sau-select">
            <div class="header">
              <h4>Self Managed</h4>
              <p>label</p>
            </div>
            <div class="main">
              <span class="tag tag-warning">Recommened</span>
              <p><i class="fa fa-plus" aria-hidden="true"></i> $399.00</p>
            </div>
          </div>
        </div><!-- /col-md-3 -->

        <div class="col-md-3">
          <div class="sau-select">
            <div class="header">
              <h4>Self Managed</h4>
              <p>label</p>
            </div>
            <div class="main">
              <span class="tag tag-success">Success</span>
              <p>Included</p>
            </div>
          </div>
        </div><!-- /col-md-3 -->
      </div><!-- /row -->

SASS

    .sau-select {
      border: 2px solid $sau-gray-mid;
      float:left;
      width:100%;
      text-align:center;
      cursor:pointer;
      .header{
        background-color: $sau-gray-mid;
        color:#fff;
        padding:7px 0 7px 0;

        h4{
            font-size:1.1rem;
        }

        p{
            font-size:0.8rem;
            padding:0;
            margin:-7px 0 0 0;
            line-height:18px;
        }
    }
    .main{
        color:$sau-gray-mid;
        padding:4px 0 15px 0;
        p{
            padding:0;
            margin:0;
        }
    } 

    &:hover, &.selected{
        border: 2px solid $sau-blue;
        .header{
            background-color: $sau-blue;
        }
        .main{
            color:$sau-blue;
        }
    }

    &.error{
        border: 2px solid $brand-danger;
        .header{
            background-color: $brand-danger;
        }
        .main{
            color:$brand-danger;
        }
    }
}

Answer 1

如果我没看错你的问题，我想你可能对 SASS 的功能有一点错误的认识。我会尽力回答；

SASS 只是一个糖层，无论你在 sass 文件中有什么功能或混合，它最终总是被编译并成为一个 .css 文件，它影响浏览器的能力 100% 限于css的精确标准，所以如果css能做到，那是可以的，如果css做不到，sass就帮不了你。

考虑到这一点，在悬停时改变颜色是没有问题的，而且您的代码似乎表明您已经实现了这一点。

至于选择的颜色，根本没有办法解决，你必须在HTML中添加.selected类。这显然会触发关联类的颜色变化。

希望我的回答对你有帮助。