将Mixins与SCSS一起创建断点-DEV365 开发者社区

Introduction
What are Breakpoints?
Creating a Mixin for Breakpoints
Using the Breakpoint Mixin
HTML Example
Conclusion

介绍

Web开发的主要挑战之一是创建一种响应式设计，完美适应所有类型的设备。在这种情况下，事实证明，SASS（句法上很棒的样式表），更具体地说是SCSS（SASSY CSS），是有效控制CSS样式的强大工具。 SCSS最有用的功能之一是能够创建Mixins，这是可重复使用的代码块。

。

什么是断点？

断点是网站或应用程序的内容响应布局更改以适应不同屏幕尺寸的点。它们对于将站点的外观调整到移动设备，平板电脑和台式机至关重要。

为断点创建混合蛋白

scss允许创建混合蛋白可以封装将要重复使用的样式。让我们看看如何为断点创建混合蛋白：

@mixin breakpoint($point) {
  @if $point == small {
    @media (max-width: 600px) { @content; }
  }
  @elseif $point == medium {
    @media (max-width: 900px) { @content; }
  }
  @elseif $point == large {
    @media (max-width: 1200px) { @content; }
  }
}

这种混合蛋白允许您为三个不同的断点：小，中和大。 @content允许您将样式块传递到Mixin，该模块将在指定的断点上应用。

使用断点混合蛋白

现在我们创建了混合物，让我们使用它。例如，当屏幕小于600px（小）：
时，我们可能想更改DIV的背景颜色

.div-example {
  background-color: blue;

  @include breakpoint(small) {
    background-color: red;
  }
}

在此示例中，DIV将在大于600px的屏幕上具有蓝色背景。但是，当屏幕小于600px时，Mixin将在breakpoint(small)块内应用样式，将背景颜色更改为红色。

HTML示例

现在，将其应用于HTML，我们有：

<div class="div-example">
    This is an example of a responsive design div.
</div>

将我们的SCSS编译为CSS并正确包含在页面上，示例Div将根据我们之前定义的屏幕大小做出响应。

结论

将Mixins与SCSS一起使用来创建断点是管理响应CSS的有效策略。它有助于保持代码清洁，可读和易于维护，同时为用户提供优化的查看体验，无论他们使用的设备如何。

但是，请记住，每个项目都是唯一的，可能需要不同的数字或断点值。适应您的特定需求，并始终记住在不同设备上测试您的设计，以确保一致且愉快的用户体验。

将Mixins与SCSS一起创建断点