css - 如何扩展现有的 SASS Bootstrap 网格类

Question

我试图让我的代码更干净，所以我有类似的东西

 <div class="col-sm-6 col-md-6">
                    <div class="feature-list-item">
                        <div class="feature-list-item__icon-container">
                            <i class="feature-list-item__icon fa fa-code"></i>
                        </div>
                        <div class="feature-list-item__description">
                            <h4 class="feature-list-item__description-title">Clean Code</h4>
                            <p class="feature-list-item__description-text"> Hello world</p>

                        </div> 
                    </div>
                </div> 

正如您可能猜到的，我不喜欢这个包装div -<div class="col-sm-6 col-md-6">

根据 SMACSS 使用它作为布局是个好主意规则。

所以我想创建布局类，例如l-feature-list-item

并替换所有这些列类，使其看起来如下

 <div class="l-feature-list-item">
                    <div class="feature-list-item">
                        <div class="feature-list-item__icon-container">
                            <i class="feature-list-item__icon fa fa-code"></i>
                        </div>
                        <div class="feature-list-item__description">
                            <h4 class="feature-list-item__description-title">Clean Code</h4>
                            <p class="feature-list-item__description-text"> Hello world</p>

                        </div> 
                    </div>
                </div> 

但在这种情况下，我需要扩展 col-sm-6 col-md-6类(class)来自Bootstrap SASS sources

.l-feature-list-item {
   @extend .col-sm-6;
   @extend .col-md-6;
}

这是伪代码。

所以我的问题是如何正确组织我的想法。使用@import “../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap”;将使其输出 bootstrap sass sources 中的每个类这是不受欢迎的行为。我只需要导入依赖项，如果可以 @extend 那就太好了喜欢 placeholders .

如果有任何帮助，我将不胜感激。

Answer 1

当您需要完整的 Bootstrap 但需要更多网格尺寸时，可以这样做。首先导入 Bootstrap 变量，进行更改，然后导入 Bootstrap 的其余部分，这一点很重要。因此，我们假设您有 style.scss:

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
 
// extend bootstrap grid system
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1360px,
  xxxl: 1860px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1300px,
  xxxl: 1800px
);

@import '~bootstrap/scss/bootstrap';

// your code next