Vue Scoped SCSS 媒体查询

在 Vue 中，可以通过 scoped 属性将样式限定在组件内部，避免样式污染。而 SCSS 提供了强大的样式编写语法，可以通过 mixin 和函数等方式编写可复用的样式代码。在组件中使用 mixin 和函数等 SCSS 特性也很简单，只需在样式中引入即可。但是如何在 scoped 样式中使用媒体查询呢？

媒体查询简介

媒体查询是 CSS 的一个重要特性，它可以根据设备属性和状态来调整样式。媒体查询的语法如下：

@media (media feature) { /* styles */ }

其中，media feature 表示设备属性和状态，例如窗口宽度和高度、分辨率等；styles 表示在满足 media feature 条件下应用的样式。

例如，以下媒体查询表示在窗口宽度小于等于 768px 时应用样式：

@media (max-width: 768px) {
  /* styles */
}

在 Scoped 样式中使用媒体查询

在 Vue 的 scoped 样式中使用媒体查询需要注意样式作用域的问题。

首先，我们需要在组件中引入 SCSS 文件：

<template>
  <!-- ... -->
</template>

<script>
import '@/assets/styles/common.scss'

export default {
  // ...
}
</script>

<style scoped lang="scss">
/* 此处无法使用媒体查询 */
</style>

然后，在 SCSS 文件中编写媒体查询样式：

@mixin media($mediafeature) {
  @media #{$mediafeature} {
    @content;
  }
}

/* 在媒体查询中编写组件样式 */
.my-component {
  color: #fff;

  @include media(max-width: 768px) {
    color: #000;
  }
}

最后，在组件样式中引入 SCSS 文件并使用媒体查询样式：

<template>
  <div class="my-component">
    <!-- ... -->
  </div>
</template>

<script>
import '@/assets/styles/common.scss'

export default {
  // ...
}
</script>

<style scoped lang="scss">
/* 引入 SCSS 文件 */
@import '@/assets/styles/common.scss';

/* 使用媒体查询样式 */
.my-component {
  /* 其他样式 */
  @include media(max-width: 768px) {
    /* 媒体查询样式 */
  }
}
</style>

通过 mixin 的方式，可以轻松地在 scoped 样式中使用媒体查询，避免样式污染，并保证样式的复用性和可维护性。

总结

• 媒体查询是 CSS 的一个重要特性，可以根据设备属性和状态来调整样式；
• 在 Scoped 样式中使用媒体查询需要注意样式作用域的问题；
• 可以通过 mixin 的方式，在 Scoped 样式中使用媒体查询，保证样式的复用性和可维护性。