在前端开发过程中，我们经常需要针对不同的屏幕尺寸定义不同的样式，这就需要借助 @media 查询来实现。而使用预处理器 SASS 可以更加方便地书写媒体查询。
语法
在 SASS 中使用 @media 与 CSS 中类似，只不过需要使用 SASS 的嵌套语法。例如：
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}这段代码表示在屏幕宽度小于等于 600px 时，将 body 的字体大小设置为 14px。
嵌套书写方式
在 SASS 中可以将媒体查询的样式规则嵌套到对应的选择器中，例如：
body {
font-size: 16px;
@media screen and (max-width: 600px) {
font-size: 14px;
}
}这段代码表示在屏幕宽度小于等于 600px 时，将 body 的字体大小设置为 14px，否则为 16px。这种方式可以更加简洁地书写样式。
嵌套查询方式
在 SASS 中可以将一个媒体查询嵌套到另一个媒体查询中，例如：
-- -------------------- ---- -------
------ ------ --- ----------- ------ -
---- -
---------- -----
------ ------------- ---------- -
---------- -----
-
-
-这段代码表示在屏幕宽度小于等于 600px 时，将 body 的字体大小设置为 14px。在此基础上，如果屏幕处于横向方向，则将字体大小设置为 12px。这种方式可以更加细粒度地控制样式。
预定义变量
在 SASS 中可以使用预定义变量来表示常用的媒体查询关键字和分辨率值，例如：
-- -------------------- ---- -------
------- ---- ------ --- ----------- -------
-------- ---- ------ --- ----------- ------ --- ----------- --------
--------- ---- ------ --- ----------- --------
------ --------- -
---- -
---------- -----
-
-
------ ---------- -
---- -
---------- -----
-
-
------ ----------- -
---- -
---------- -----
-
-这段代码表示在三个不同的屏幕尺寸范围内，分别将 body 的字体大小设置为不同的值。这种方式可以更加清晰地表达意图，而不必手动书写完整的媒体查询表达式。
总结
通过以上介绍，我们可以看到在 SASS 中使用 @media 可以大大简化媒体查询的书写，同时也可以更加灵活地组织样式代码。学会在 SASS 中使用 @media 查询可以帮助我们更加高效地开发响应式网站和应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a5213e48841e9894195b03