在前端开发中，Sass 是一个强大的 CSS 预处理器，能够极大提升样式代码的可维护性和效率。今天就来聊聊 Sass 中的媒体查询和嵌套功能，以及如何通过 SCSS 封装媒体查询，让代码更整洁！💻✨

首先，Sass 的嵌套规则可以让 CSS 规则更加直观和易于理解。比如，当我们需要为不同屏幕尺寸调整样式时，可以使用媒体查询嵌套在选择器内。例如：

```scss

.container {

width: 100%;

@media (min-width: 768px) {

width: 50%;

}

}

```

这种方式不仅结构清晰，还能减少重复代码。但如果你有多个类似的媒体查询需求，手动编写会显得繁琐。这时，SCSS 封装媒体查询就派上用场了！你可以创建一个 mixin 来封装常见的媒体查询逻辑，如下所示：

```scss

@mixin respond($point) {

@if $point == small {

@media (max-width: 600px) { @content; }

} @else if $point == medium {

@media (min-width: 601px) and (max-width: 1024px) { @content; }

} @else if $point == large {

@media (min-width: 1025px) { @content; }

}

}

// 使用示例

.box {

background-color: f00;

@include respond(small) {

background-color: 0f0;

}

@include respond(large) {

background-color: 00f;

}

}

```

通过这种封装方式，不仅提高了代码复用性，还大大简化了媒体查询的管理，让你的项目更高效！💪🌈