构建响应式网页可能具有挑战性，尤其是在管理断点和媒体查询方面。但是，使用SCSS可以使此任务更易于管理和高效。

在本文中，我们将探讨一种有用的SCSS模式，用于管理断点和创建媒体查询。请注意，本教程具有CSS和媒体查询的一些基本知识。

SCSS简要介绍

对于不熟悉SCSS的读者，它是CSS预处理器，可让您编写具有添加功能的CSS样式。

使用SCSS，您可以在样式表中具有变量，循环，功能以及更多内容。最后，它将Web浏览器理解的常规CSS代码汇编。

根据sass-lang.com，SCSS是具有超级大国的CSS。它使样式变得更加容易，更快；让我们探索。

方法 - 预览

说我们的元素具有类名为list-item的元素，我们想实现以下内容：

1. 在小屏幕宽度上，我们想要一个18px的字体大小，
2. 然后在较大的屏幕宽度上，我们想要一个25px的字体大小。

这是使用此方法如何工作的预览：

SCSS代码：

 .list-item {
     font-size: 18px;
     @include sm {
       font-size: 25px
     }
 }

编译CSS输出：

.list-item {
  font-size: 18px;
}
@media only screen and (min-width 600px) {
  .list-item {
    font-size: 25px;
  }
}

如上所述，@include sm就是所需的。

为什么这种方法？

简单性和可维护性

从上面的示例中，我们看到响应样式嵌套在同一选择器中。

因此，每当需要维护选择器的规则时，您就会将它们全部放在一个地方，而不是通过不同的媒体品牌段和重新定义规则。

另外，它带有简单的常规标签。如果您习惯于使用诸如“ Col-SM-2”和“ Col-MD-4”的课程进行样式图书馆，则可以在样式表中实现这一目标：

.div {
    @include sm {
        grid-template-columns: 1fr 1fr;
    }
    @include md {
        grid-template-columns: repeat(4, 1fr);
    }
}

执行

这是通过结合SCSS Mixins 和内容块的能力来实现的。


Mixins让您定义可重复使用的样式块，而content使您可以将样式/嵌入样式插入已定义的Mixin中。

下面是SCSS代码，它为小断点定义了mixin -sm并嵌入了media query的600px。

 @mixin sm {

     @media only screen and(min-width 600px){
         @content; // projected content will be embedded here
     }

 }

c'est fini！ Now whenever a selector needs specific styles for this media query, we include the mixin using its name, @include sm {...}.

移动首先考虑

移动第一方法是一种将小屏幕优先级的样式的方法。样式首先为小屏幕编写，然后对大屏幕进行查询。

到目前为止，本文中使用的示例遵循此原则，但是在某些情况下需要相反。

我喜欢使用这两种方法的混合蛋白。媒体查询的主要区别是min-width:和max-width:。

我创建了一个包含我默认断点的SCSS片段，您可以在github -breakpoints.scss上找到它。

捆绑尺寸考虑

使用这种方法可能会使您的最终CSS输出以及许多媒体查询声明。这是因为对于每个@include，都会生成一个相应的媒体查询。

根据项目的规模，生成如此多的媒体查询声明可能会极大地影响其捆绑包的大小。

每个字节很重要。

如果您对应用程序捆绑包的大小非常意识到，就像我一样，请不要担心。值得庆幸的是，有一个WebPack插件，可以分组类似的媒体查询。

因此，在您的最终CSS输出中，您将获得老式的单媒体查询声明（yaaaay！）。

请在NPM上查看plugin，以了解更多信息。

结论

请记住，模式通常不是一件大小的交易。

我确实喜欢这种方法，因为它非常简约，而且我已经在项目上使用了两年。

但是，我愿意在评论中了解您的方法，包括建议。

我希望您喜欢这篇文章，直到下次。