直接在HTML中的Flex类，如bootstrap或scss元素中的mixin? [英] Flex class directly in html like bootstrap or mixin in scss element?

问题描述

我是前端的新手，我试图了解如何智能地使用类(bem和sass).

I'm new to frontend and I'm trying to understand how to use classes intelligently (bem and sass).

我觉得我严重依赖mixin.几天前，出于好奇，我稍微看了一下Bootstrap，发现像flex这样的类(每个媒体查询一个类)直接应用在html标签中.

I feel like I rely heavily on mixins. I looked a bit at Bootstrap out of curiosity a few days ago and noticed that classes like flex (one class per media queries) are applied directly in the html tag.

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

For my part, I got used to using flex in mixin and including it in 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, 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;
        }
}

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

In bootstrap, it uses already defined classes and applies them directly in the html tag.

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

我的方法是否正确?还是我必须为每个媒体查询准备预定义的类并将它们直接添加到html标签l ikes bootstrap示例?

Is my method correct? Or do I have to prepare pre-defined classesfor each media-queries and add them directly to the html tag like the bootstrap example?

谢谢！

推荐答案

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

I might not have understood your question correctly. I also don't know your knowledge on Bootstrap. However, it's a CSS framework that is built using pre-defined classes as you said, those classes you can add to your project as you see fit and also override them in your own custom stylesheets. Having said that, you don't have to follow adding classes in your project similar to bootstrap if that's what you are asking. Since you are using Sass, you can create another mixin for breakpoints and utilize it where you see fit (e.g. to edit the flexbox at a certain breakpoint):

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

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

这篇关于直接在HTML中的Flex类，如bootstrap或scss元素中的mixin?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！