如何使用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在项目中包含引导程序。（参见http://sass-lang.com/guide#topic-5）

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

如果 bootstrap 未包含在您的 scss 中，您将无法扩展这些类。

例子：

/* 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;
}