如何使用SCSS创建包含引导类的类

Question

我的问题是我有几个看起来像这样的DIV：

<div class="col-sm-4 col-md-3 col-lg-2">
  ...

问题是，如果我决定改变它的布局，我想立刻改变所有这些。我试过这样做：

CSS：

.product-layout {
  @extend .col-sm-4;
  @extend .col-md-3;
  @extend .col-lg-2;
}

HTML：

<div class="product-layout">
  ...

但这并没有奏效。有没有办法做到这一点？

Answer 1

为了能够使用扩展，您还应确保使用@import在项目中包含引导程序。 （cfr。http://sass-lang.com/guide#topic-5）

所以基本上你会使用@import "bootstrap";（使用bootstrap sass项目：https://github.com/twbs/bootstrap-sass）。

如果你的scss中没有包含bootstrap，你将无法扩展这些类。

---

示例：

/* Import bootstrap-sass so that we have access to all of its selectors */
@import "bootstrap";

.product-layout {
    @extend .col-sm-4;
    @extend .col-md-3;
    @extend .col-lg-2;
}