如何扩展现有的 SASS 引导网格类答案

【问题标题】：How to extend existing SASS bootstrap grid classes如何扩展现有的 SASS 引导网格类
【发布时间】：2016-08-11 15:08:58
【问题描述】：

我正在努力使我的代码更干净，所以我有类似的东西

 <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>

但在这种情况下，我需要从Bootstrap SASS sources 扩展col-sm-6 col-md-6 类

.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 一样，那就太好了。

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

【问题讨论】：

您确定要这样做吗？熟悉Bootstrap的人看一眼class="col-sm-6 col-md-6"就知道是什么了
如果我想交换我的网格系统怎么办，在这种情况下，我需要更改 HTML 中的所有内容，但主要是复杂的 PHP 文件。这就是为什么我要封装所有这些东西
是的，但是您是否可能需要/想要交换您的网格系统？会用 _grid.scss 混合帮助生成不同的网格（即更多列）吗？

标签： css twitter-bootstrap sass code-cleanup

【解决方案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

【讨论】：

【解决方案2】：

在 Bootstrap 4 中，“bootstrap-grid”可以与 Bootstrap 的其余部分分开构建。因此，您只能像这样使用和扩展网格类...

@import "bootstrap-grid";

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

演示：https://codeply.com/go/u5qAx8K7AN

另见：How to extend/modify (customize) Bootstrap 4 with SASS

【讨论】：