使用 SASS 混合设置媒体查询

在构建网站和应用程序时，我们经常使用媒体查询来确保布局的响应式设计。这样，无论用户通过何种设备访问，页面都能自适应调整，从而为所有用户提供良好的体验。

CSS 媒体查询

如果你有 CSS 经验，应该知道媒体查询是 CSS3 的一个模块，它允许内容根据特定条件进行渲染和调整。例如屏幕分辨率：

1@media (max-width: 599px) {
2  font-size: 1rem;
3}

这里，当视口宽度 ≤ 599px 时，字体大小设置为 1rem。

这看起来很简单，但要实现完整的响应式设计，我们通常需要多个媒体查询。

然而，不可避免地，我们会遇到需要修改断点规则的情况。如果要手动搜索并修改所有受影响的代码行，显然效率很低。必须有更好的解决方案！

近年来，现代布局规范有了显著提升，Grid 和 Flexbox 本身默认就是响应式的。这大大减少了项目中对媒体查询的需求，也让代码更加简洁。

尽管如此，媒体查询在现代 Web 开发中依然不可或缺。随着项目规模扩大，我们需要更高效的方式来管理它们。

这时，SASS 的 mixins 就派上用场了！

Mixins

正如我们所知，SASS 的 mixins 允许我们创建可复用的代码块——它们减少重复、促进 DRY（Don't Repeat Yourself）原则，并便于维护。

将媒体查询封装成 mixins，然后在需要的地方引入，这种做法非常合理！

下面我们来看一个实际例子。

设置你的 mixins

1@mixin for-phone-only {
2  @media (max-width: 599px) { @content; }
3}
4@mixin for-tablet-portrait-up {
5  @media (min-width: 600px) { @content; }
6}
7@mixin for-tablet-landscape-up {
8  @media (min-width: 900px) { @content; }
9}
10@mixin for-desktop-up {
11  @media (min-width: 1200px) { @content; }
12}
13@mixin for-big-desktop-up {
14  @media (min-width: 1800px) { @content; }
15}

这里，我们定义了 5 个常见的断点作为 @mixin 块。

@content 是 SASS 的一个指令，用于延迟插入内容，因为通常不会一次性写完所有媒体查询。

使用 mixin

假设我们想在移动设备上减小标题文字的字体大小。

我们可以将 mixin 以“包含”的方式嵌套在对应的类中，如下所示：

1.header-title {  
2  font-size: 2rem;  
3 
4  @include for-phone-only {    
5    font-size: 1rem; 
6  }
7}

编译后，@include 会转换为：

1.header-title {
2  font-size: 2rem;
3}
4
5@media (max-width: 599px) {
6  .header-title {
7    font-size: 1rem;
8  }
9}

现在，我们可以在项目中的任何地方轻松插入媒体查询！

而且，无需记忆断点数值，因为它们已经预先定义好了。如果需要调整，只需修改 mixins 即可。

更进一步：使用条件判断设置 mixins

如果你想更进一步，还可以使用条件语句来定义 mixin。

只需创建一个 @mixin，传入参数来选择断点，例如：

1@mixin for-size($size) {
2  @if $size == phone-only {
3    @media (max-width: 599px) { @content; }
4  } @else if $size == tablet-portrait-up {
5    @media (min-width: 600px) { @content; }
6  } @else if $size == tablet-landscape-up {
7    @media (min-width: 900px) { @content; }
8  } @else if $size == desktop-up {
9    @media (min-width: 1200px) { @content; }
10  } @else if $size == big-desktop-up {
11    @media (min-width: 1800px) { @content; }
12  }
13}

使用时，只需指定类型即可：

1.header-title {  
2  font-size: 2rem;  
3 
4  @include for-size(phone-only) {    
5    font-size: 1rem; 
6  }
7}

就这么简单！

编写媒体查询不再令人头疼。通过使用 SASS mixins，我们可以在一个中心位置统一管理所有媒体查询。

项目响应式处理变得轻松多了！

完成！恭喜你完成了本课时！你现在已掌握实施 SASS 所需的所有知识与工具，可以将其应用到未来任意项目中。

保持这份势头，用它开启下一个项目吧！

- Tim