基础概念
@media 规则允许你在特定条件下应用 CSS。通过使用媒体查询，你可以创建响应式的样式表，这些样式表会根据设备的特性（如屏幕宽度、高度或方向）来调整布局和样式。
在 Sass 中，你可以利用嵌套功能，让代码更加整洁和易于维护。下面将详细介绍如何使用 @media 规则，并展示一些实际的例子。
使用基本媒体查询
在 Sass 中，@media 规则可以像普通的 CSS 一样使用。这里有一个简单的例子：
.container {
width: 100%;
@media (min-width: 768px) {
width: 750px;
}
}在这个例子中，当视窗宽度大于等于 768px 时，.container 类的宽度将会变为 750px。
嵌套媒体查询
Sass 允许你在媒体查询内部嵌套 CSS 规则，这使得代码更加简洁和易于理解。例如：
-- -------------------- ---- -------
---------- -
------ -----
----------------- --------
------ ----------- ------ -
------ -----
----------------- --------
-
-在这个例子中，当视窗宽度小于等于 768px 时，背景颜色会改变为 #e1e1e1，同时宽度保持为 100%。
使用逻辑运算符
除了单一条件外，你还可以结合多个条件来创建更复杂的媒体查询。Sass 支持使用逻辑运算符 and、not 和 only 来组合多个媒体查询条件。
使用 and
当你想在一个媒体查询中添加多个条件时，可以使用 and 运算符：
.container {
width: 100%;
@media (min-width: 768px) and (orientation: landscape) {
width: 750px;
}
}在这个例子中，只有当屏幕宽度大于等于 768px 并且是横向模式时，.container 的宽度才会变成 750px。
使用 not
如果你想排除某些条件，可以使用 not 运算符：
.container {
width: 100%;
@media not all and (orientation: portrait) {
width: 750px;
}
}在这个例子中，只要不是纵向模式，.container 的宽度就会变成 750px。
使用 only
only 关键字用于确保一个媒体查询只应用于支持该媒体类型的设备：
.container {
width: 100%;
@media only screen and (min-width: 768px) {
width: 750px;
}
}在这个例子中，媒体查询只会应用于支持屏幕显示的设备，并且宽度大于等于 768px。
使用自定义变量
为了使你的媒体查询更加灵活和可重用，可以使用 Sass 变量。这样，你可以在一个地方更改值，然后在所有地方更新。
-- -------------------- ---- -------
------------------- ------
---------- -
------ -----
------ ----------- ------------------- -
------ ------
-
-在这个例子中，通过使用变量 $breakpoint-medium，你可以轻松地更改断点值，而无需修改每个媒体查询中的具体数值。
结论
通过使用 @media 规则，你可以创建响应式的网页设计，使其适应各种不同的屏幕尺寸和设备类型。Sass 提供了强大的工具来帮助你更有效地管理和组织这些规则，从而提高代码的可读性和可维护性。
接下来，你可以继续探索其他 Sass 功能，如函数、混合宏等，以进一步提升你的前端开发技能。