在前端开发中，我们经常需要对不同屏幕尺寸的设备做出不同的响应。而媒体查询是实现响应式布局的重要工具之一。SASS 中也提供了强大的媒体查询功能，方便我们针对特定尺寸的设备进行不同的样式控制。
媒体查询的基本用法
在 SASS 中，我们可以使用 @media 指令来添加媒体查询。其基本语法如下：
@media screen and (max-width: 768px) {
// 样式代码
}其中 screen 表示媒体类型，max-width 表示最大宽度，在这里指屏幕宽度小于等于 768px 时执行样式代码。
我们也可以使用其他的媒体查询条件，比如最小宽度 min-width，设备类型 device-type 等。例如：
@media only screen and (min-width: 768px) and (max-width: 1024px) {
// 样式代码
}
@media print {
// 样式代码
}媒体查询的高级用法
除了基本的媒体查询条件外，SASS 还支持更加复杂的媒体查询条件和语法。
嵌套
我们可以将媒体查询与其他 CSS 规则嵌套在一起，这样可以更加方便地组织样式代码。例如：
-- -------------------- ---- -------
------- -
-- ----
------ ------ --- ----------- ------ -
-- ----
-
------ ------ --- ----------- ------- -
-- ----
-
-继承
我们可以使用 @extend 指令来继承媒体查询中的样式代码。这样可以避免重复的代码。例如：
-- -------------------- ---- -------
-- ----------
------ ------ --- ----------- ------ -
---------- -
-------- -----
-
-
-- ----
------- -
-- ----
------ -
------- -----------
-
-在上述代码中，我们定义了 .hidden-xs 样式，并在 #header 中继承了该样式。这样就可以避免重复在媒体查询和普通 CSS 规则中写入相同的显示/隐藏样式代码。
变量
我们可以使用变量来简化媒体查询中的样式代码。例如：
-- -------------------- ---- ------- --------------- ------- --------------- ------ --------------- ------ ------ ----------- --------------- - -- ---- - ------ ----------- --------------- --- ----------- --------------- - -- ---- -
在上述代码中，我们使用了变量来代替具体的媒体查询条件，使代码更加简洁易懂。
总结
在 SASS 中使用媒体查询可以帮助我们更加方便地针对不同的设备尺寸进行样式控制。除了基本的媒体查询条件外，复杂的媒体查询语法和高级用法也可以帮助我们更加灵活地控制样式代码。应用这些功能可以使我们的前端开发更加高效和简洁。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f919d3f6b2d6eab30b3bb3