在前端开发中，媒体查询是一个十分重要的概念，它允许我们根据不同设备的屏幕尺寸和分辨率来应用不同的样式。在 SASS 中，我们可以通过 mixin 和变量来定义媒体查询，以提高代码的可重复使用性和可维护性。
定义 mixin
在 SASS 中，我们可以使用 mixin 来定义媒体查询。一个 mixin 可以包含多个样式规则，并且可以接受参数。媒体查询也可以通过 mixin 接受参数。下面是一个基本的 mixin 定义：
------ ------------------ -
------ ----------- ------------ -
---------
-
-这个 mixin 接受一个参数 breakpoint，我们可以指定媒体查询的断点值。在 mixin 中，我们使用 @media 语句来定义媒体查询，使用 @content 语句来引入 mixin 中的样式规则。
定义变量
在 SASS 中，我们可以使用变量来存储媒体查询的断点值。这样可以方便我们在多个 mixin 中共享这些值，避免了硬编码。下面是一个变量定义：
------------------ ------ ------------------- ------ ------------------ -------
应用 mixin
在 SASS 中，我们可以通过 @include 语句来应用 mixin。下面是一个应用 mixin 的例子：
---- -
------ -----
-------- ------------------------- -
------ ----
------ -----
-
-在这个例子中，我们定义了一个 .box 类，宽度为 100%。然后我们使用 @include 语句来调用 media mixin，并传入 $breakpoint-medium 变量作为参数。在这个 mixin 中，如果屏幕宽度大于等于 992px，就会应用 50% 宽度和左浮动的样式规则。
总结
在 SASS 中定义媒体查询，可以通过 mixin 和变量来提高代码的可重复使用性和可维护性。在应用 mixin 时，我们可以指定不同的断点值，根据不同设备屏幕的尺寸应用不同的样式。通过深入理解媒体查询，我们可以更好地掌控样式在不同设备上的表现，提升用户体验，使页面适配更多的设备。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6458c159968c7c53b0b117d7