twitter-bootstrap-3 - 如何使用 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

为了能够使用 extend，您还应该确保使用 @import 将 bootstrap 包含在您的项目中。(参见 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;
}