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

Question

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

我觉得我非常依赖 mixins。几天前我出于好奇看了一下 Bootstrap，并注意到像 flex 之类的类（每个媒体查询一个类）直接应用在 html 标记中。

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

我的混音：

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

我的方法：（一段scss）：

 .introduction {
        @include d-flex(column, center, left); //direction, justify, align
        background-image: linear-gradient(rgba(177, 174, 174, 0.5), rgb(0, 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;
        }
}

在 bootstrap 中，它使用已经定义的类并直接在 html 标签中应用它们。

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

我的方法正确吗？或者我是否必须为每个媒体查询准备预定义的类并将它们直接添加到 html 标记中，就像 就像引导示例？

谢谢！

Answer 1

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

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

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