如何在 SASS 中使用媒体查询？
在前端开发中，我们经常需要根据不同的屏幕分辨率来调整网页的布局、字体大小等样式，这时候就需要使用到媒体查询。SASS 是一种 CSS 预处理器，它可以让我们更方便地编写 CSS 样式，同时也提供了方便的媒体查询语法。
一、SASS 媒体查询语法
在 SASS 中，我们可以使用 @media 规则来创建媒体查询。与普通的 CSS 相比，SASS 的媒体查询语法更为简洁，可以大大提高我们的开发效率。
媒体查询语法如下：
@media 规则名 {
// 样式代码
}其中，规则名可以是以下任意一种：
- 媒体类型（比如 screen、print 等）
- 宽度范围（比如 (min-width: 768px)、(max-width: 1024px) 等）
可以根据需要组合使用，比如：
@media screen and (min-width: 768px) {
// 样式代码
}以上代码表示，只有在屏幕宽度大于等于 768px 且媒体类型为 screen 时，才会应用这部分样式。
二、SASS 媒体查询的嵌套语法
SASS 的另一个特点是支持嵌套语法，也就是说，我们可以将一部分样式代码嵌套在另一部分代码中，以提高可读性。
比如，我们可以将媒体查询代码嵌套在某个选择器内部，如下：
.container {
width: 100%;
@media (min-width: 768px) {
width: 90%;
}
}以上代码表示，当屏幕宽度大于等于 768px 时，容器的宽度将变为 90%。
三、SASS 媒体查询的变量语法
SASS 还支持变量语法，通过变量来定义媒体查询的参数，可以极大地提高代码的复用性和可读性。
比如，我们可以定义一个 $small-screen 变量，用于表示小屏幕的宽度范围：
-- -------------------- ---- -------
-------------- ----------- -------
---------- -
------ -----
------ ---------------- -
------ ----
-
-以上代码中，#{$small-screen} 表示将 $small-screen 变量的值插入到媒体查询语句中，编译后的代码为：
-- -------------------- ---- -------
---------- -
------ -----
-
------ ----------- ------ -
---------- -
------ ----
-
-这样，我们就可以在需要使用小屏幕样式的地方，直接引用 $small-screen 变量，避免了重复编写媒体查询代码的麻烦。
四、SASS 媒体查询的 mixin 语法
SASS 提供了 mixin 语法，可以将一部分代码封装成一个 mixin，然后在需要使用的地方进行调用，以提高代码的复用性。
比如，我们可以定义一个 mixin，用于完成某个媒体查询样式的设置：
-- -------------------- ---- -------
------ ------------------ -
------ --------- -
---------
-
-
---------- -
------ -----
-------- ----------------------- -------- -
------ ----
-
-以上代码中，@content 表示 mixin 被调用时，会被替换成调用该 mixin 的代码块中的内容。
这样，我们就可以在需要使用媒体查询样式的地方，直接引用 responsive 这个 mixin，避免了重复编写媒体查询代码的麻烦。
总结
- 在 SASS 中，我们可以使用 @media 规则来创建媒体查询。
- SASS 支持嵌套语法，可以将媒体查询代码嵌套在某个选择器内部。
- SASS 支持变量语法，通过变量来定义媒体查询的参数。
- SASS 支持 mixin 语法，可以将一部分代码封装成一个 mixin，然后在需要使用的地方进行调用。
示例代码如下：
-- -------------------- ---- -------
-------------- ----------- -------
------ ------------------ -
------ --------- -
---------
-
-
---------- -
------ -----
------ ------ --- ----------- ------ -
------ ----
-
------ ---------------- -
------ ----
-
-------- ----------------------- -------- -
----------------- -----
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459fe8b968c7c53b0c1ad4e