使用Bootstrap和itscss

2023年6月1日 237次阅读

看过BEM命名约定.

我真的想用这些方法使用bootstrap sass.

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

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

例如,我如何使用BEM命名典型的bootstrap导航？

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

会涉及什么,我应该怎么做？

最佳答案 是的,您绝对可以使用
@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.

另一个需要指出的重要事情是,包含/扩展所有Bootstrap类只是因为你喜欢使用BEM可能不是最好的方法.有这个甜蜜的地方,你必须找到自己和你正在进行的项目.以下是讨论此内容的一些链接：

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

点赞