使用变量获取HTML中的类

Question

我对Sass很陌生，我想根据特定条件使用一个CSS类或另一个CSS类...

基本上，如果我的@media的大小为@media width：320px，我想使用bootstrap的col-xs-12，而@media的大小为width：480px，然后使用bootstrap的col-xs-6。 我试图通过在@media中@extend这两个类来实现这一点，但是它不会编译。

有没有一种方法可以声明变量并在类名中使用它？ 像这样：

$my-class: none;

@media (min-width:320px) {
   $my-class: col-xs-12;
}

@media (min-width:480px) {
   $my-class: col-xs-6;
}

在我的html中：

<div class="row">
    <div class="col $my-class"><!--Replace with the value of this variable.-->
    </div>
</div>

我已经阅读了Sass的一些资料，但是就像说的一样，我对此非常非常陌生。 我不知道我问的是对的还是合理的...

Answer 1

Sass无法访问或修改HTML标记。 它只能编译为静态CSS文件。

使用Bootstrap的网格，您应该能够为每个断点包括列类，例如col-xs-12 col-sm-6可以在xs断点处获取12列，在sm断点处获取6列。

另外，如果您使用的是Boostrap v4（仍为Alpha版），则可以在媒体查询中使用@include make-col(6)进行更多控制，并使标记类更具语义。

Answer 2

对于SASS，您的语法有些偏离，但是问题的根源是您需要extend或include bootstraps类。 col-xx-xx类是实际的媒体查询，因此您实际上是在媒体查询中放置了媒体查询。

您想为您的SASS执行此操作：

.row {
    .col {
        @extend .col-xs-12;
        @extend .col-sm-6;
    }
}

除非需要将样式仅应用于具有该类的元素，否则不需要.col特殊类。

因此，您的SASS可能如下所示：

.row {
        .your-class {
            @extend .col-xs-12;
            @extend .col-sm-6;
        }
    }

您的HMTL

<div class="row">
    <div class="col your-class"></div>
</div>

就像其他答案一样，SASS不会直接影响您的HTML，也无法读取HTML中的变量。 您只需要使用像普通CSS这样的类，因为SASS只是被处理为CSS。

注意！ 为此，您必须在SASS文件中包含引导程序，以便预处理程序可以访问变量：

您的SASS文件（在顶部）：

@include 'bootstrap.scss' <-- or wherever your bootstrap SASS files live

希望这会有所帮助。