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

扩展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 4中，＆＃34; 引导网格＆＃34;可以与Bootstrap的其余部分分开构建。因此，您只能使用和扩展这样的网格类......

@import "bootstrap-grid";

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

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

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

Answer 2

当您需要完整的Bootstrap但具有更大的网格大小时，可以按照以下方法进行操作。重要的是，首先导入Bootstrap变量，进行更改，然后再导入其余的Bootstrap。因此，假设您拥有const jwt = require('jsonwebtoken'); module.exports.verifyJwtToken = (req, res, next) => { var token; if ('authorization' in req.headers) token = req.headers['authorization'].split(' ')[1]; if (!token) return res.status(403).send({ auth: false, message: 'No token provided.' }); else { jwt.verify(token, process.env.JWT_SECRET, (err, decoded) => { if (err) return res.status(500).send({ auth: false, message: 'Token authentication failed.' }); else { req._id = decoded._id; req.role = decoded.role; next(); } } ) } }：

style.scss

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

2 个答案: