如何扩展现有的SASS引导网格类 [英] How to extend existing SASS bootstrap grid classes

问题描述

我正在尝试使代码更简洁，所以我有类似的内容

I am trying to make my code cleaner, so I have something like that

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

As you may guess, I don't like this wrapper div - <div class="col-sm-6 col-md-6">

根据 SMACSS 规则将其用作布局是一个好主意。

It is great idea to use it as layout according to the SMACSS rules.

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

So I want to create class for layout, for instance l-feature-list-item

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

And replace all these columns classes to make it look as following

 <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 来自 Bootstrap SASS来源的类

But in this case, I need to extend col-sm-6 col-md-6 classes from 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来源这是不良行为。
我只需要导入依赖项，如果可以像 placeholders 那样 @extend 会很感激。

So my question is how to organize my idea correctly. Using @import "../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap"; will make it output every single class from bootstrap sass sources that is undesirable behavior. I need import only dependencies and it would be grate if it was possible to @extend like placeholders.

我将不胜感激。

推荐答案

当您需要完整的Bootstrap，但网格尺寸更大时，可以完成此操作。重要的是，首先导入Bootstrap变量，进行更改，然后再导入其余的Bootstrap。因此，假设您具有 style.scss ：

Here's how it can be done when you need full Bootstrap, but with more grid sizes. It is important to import the Bootstrap variables first, do the changes, and import the rest of Bootstrap next. So, let's assume you have your 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

这篇关于如何扩展现有的SASS引导网格类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！