在html中使用变量获取类

Question

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

基本上，如果我的@media 的大小为@media width:320px，我想使用引导程序的 col-xs-12 并且@me​​dia 的大小为 width:480px，然后引导程序的 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 来说有点偏离，但问题的根源在于您需要 extend 或 include 引导类。 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

希望这会有所帮助。

Answer 2

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

使用 Bootstrap 的网格，您应该能够为每个断点包含列类，例如col-xs-12 col-sm-6 得到 12 列@xs 断点和 6 列@sm 断点。

或者，如果您使用的是 Boostrap v4（仍处于 alpha 阶段），您可以在媒体查询中使用 @include make-col(6) 来获得更多控制权并让您的标记类更具语义化。