将 Bootstrap 与 itscss 一起使用答案

【问题标题】：Using Bootstrap with itscss将 Bootstrap 与 itscss 一起使用
【发布时间】：2016-02-29 13:21:24
【问题描述】：

了解 BEM 命名约定。

我真的很想在这些方法中使用 bootstrap sass。

是否可以扩展 bootstrap 以使用 BEM 样式的类名？

.block {}
.block__element {}
.block--modifier {}

例如，我将如何使用 BEM 命名典型的引导导航？

       <header className="container-fluid">
            <nav className="navbar navbar-default navbar-static-top">
                <div className="container">
                    <div className="navbar-header">
                        <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                                aria-expanded="false" aria-controls="navbar">
                            <span className="sr-only">Toggle navigation</span>
                            <span className="icon-bar"></span>
                            <span className="icon-bar"></span>
                            <span className="icon-bar"></span>
                        </button>

会涉及到什么，我应该怎么做？

【问题讨论】：

标签： css twitter-bootstrap bem

【解决方案1】：

是的，您绝对可以使用 @extend 和 @include 来做到这一点，如本文所示 - “BEM, SASS and Bootstrap: how to mix everything up in a smart way?”

总体思路是，您可以将 Bootstrap 类的 CSS 属性应用到您自己的类中。比如你自己的导航块（.my-navigation）可以获取.navbar的所有CSS样式：

.my-navigation {
    @extend .navbar;
 }

这样您就可以使用 class="my-navigation" 而不是使用 class="navbar"。

当然，为了能够做到这一点，您必须使用 Bootstrap 的 SASS 文件 - 而不是编译后的 CSS。这里有一些提示 - Bootstrap Sass Installation and Customization。

要指出的另一件重要事情是，仅仅因为您喜欢使用 BEM 而包含/扩展所有 Bootstrap 类可能不是最好的方法。您必须为自己和您正在从事的项目找出这个最佳点。以下是一些讨论此问题的链接：

Why You Should Avoid Sass @extend
Does sass harm performance?
A Tale of Front-end Sanity: Beware the Sass @import

【讨论】：