直接在HTML中的Flex类，例如bootstrap或scss元素中的mixin？

问题描述

我是前端的新手，我试图了解如何智能地使用类（bem和sass）。

我觉得我严重依赖mixin。几天前，出于好奇，我稍微看了一下Bootstrap，发现诸如flex（每个媒体查询一个类）之类的类直接应用于html标签。

就我而言，我习惯于在mixin中使用flex并将其包含在SCSS中。

我的混音：

@mixin d-flex($direction,$justify,$align) {
    display: flex;
    align-items: $align;
    justify-content: $justify;
    flex-direction: $direction;
}

我的方法 ：（一段摘要）：

 .introduction {
        @include d-flex(column,center,left); //direction,justify,align
        background-image: linear-gradient(rgba(177,174,0.5),rgb(0,0)),url("../images/header_samus.png");
        background-size: cover;
        background-repeat: no-repeat;
        font-weight: 700;
        width: 100%;
        height: 90vh;

        @include tablet{
            height:70vh;
        }
}

在引导程序中，它使用已定义的类并将其直接应用到html标签中。

<div class="d-flex p-2">I'm a flexBox container!</div>

我的方法是否正确？还是我必须为每个媒体查询准备预定义的类，然后将它们直接添加到html标签l 例如引导程序示例？

谢谢！

解决方法

我可能无法正确理解您的问题。我也不知道您对Bootstrap的了解。但是，这是一个CSS框架，使用您所说的预定义类构建，您可以根据需要将这些类添加到项目中，也可以在自己的自定义样式表中覆盖它们。话虽如此，如果您要的是那样，您不必遵循在项目中添加类似于引导程序的类。由于您使用的是Sass，因此您可以为断点创建另一个mixin并在您认为合适的地方使用它（例如，在某个断点处编辑flexbox）

@mixin mq($break) {
  @media (min-width: $break) {
     @content;
  }
}

.introduction {
   @include d-flex(column,center,left);
   @include mq(768px) {
     ...
   }
}