在Web开发中，响应式设计已经成为一种趋势，因此媒体查询也就成为了构建响应式页面的基础。在SASS中，我们可以使用mixin和变量来方便快速地实现媒体查询，让我们来看看如何实现。
为什么要在 SASS 中实现媒体查询？
在CSS中，媒体查询被广泛用于响应式设计。但是，CSS中的媒体查询有一些缺点：
缺乏复用性。在许多情况下，我们需要设置多个媒体查询，使页面的响应式设计保持良好的效果。如果在CSS代码中直接使用媒体查询，那么这些查询将不具备复用性，意味着它们将被复制和粘贴到其他部分，这会导致代码量增加，同样会增加代码错误率。
可读性变差。另一个缺点是CSS代码难以阅读和维护。如果您的网站有大量的媒体查询，那么CSS代码就会变得混乱和复杂，这会使他人难以理解您所编写的CSS。
因此，将媒体查询放在SASS mixin和变量中是一个好做法。那么，我们该如何去实现呢？
如何在 SASS 中实现媒体查询？
SASS 中的媒体查询可以使用 @media 和 mixin 来实现。具体步骤如下：
- 创建 SCSS 变量
我们可以首先在SASS文件中创建两个变量： phone-breakpoint 和 tablet-breakpoint。这些变量可以在我们的响应式设计中被重复使用。
$phone-breakpoint: 576px; $tablet-breakpoint: 768px;
- 创建 @media mixins
我们可以使用 @media mixin 来创建媒体查询 mixin。这将使代码更易于维护和阅读。在响应式设计中，您可以设置多个媒体查询，因此我们需要多个 mixin 来管理这些查询。例如，我们为移动设备和桌面设备分别设置了媒体查询：
-- -------------------- ---- -------
-- ------ -----
------ ----- -
------ ----------- -------------------- - ----- -
---------
-
-
-- ------ --
------ ------ -
------ ----------- ---------------------- -
---------
-
-这里的 @content 是Sass中的占位符，可以在调用 mixin 时由任何代码替代。
- 调用 mixin
最后，我们可以在SASS中的任何位置调用 mixin。我们可以使用 @include 关键字和mixin 名称来调用我们的mixin。
比如：
-- -------------------- ---- -------
---- -
----------------- --------
-------- ----- -
---------- -----
-
-------- ------ -
---------- -----
-
-在上面的代码中，在手机上，字体大小为14px，而在平板电脑和桌面上，则变成16px。
这样，我们就可以通过这个方式去实现媒体查询了。使用 mixin 和变量可以使我们的代码量小，更具可读性并且易于维护。
总结
在SASS中实现媒体查询可以提高代码可读性和维护性，而不会使CSS代码变得混乱。创建变量和 mixin 可以实现响应式设计的重复使用，也可以使代码更具复用性。希望这篇文章能够帮助您更好地理解如何在SASS中实现媒体查询，让您在前端开发中具备更优秀的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e73225f6b2d6eab329e9d7