使用 mixin 导入 scss 文件的内容

【问题标题】：import content of scss file using mixin使用 mixin 导入 scss 文件的内容
【发布时间】：2022-01-16 00:02:18
【问题描述】：

有没有办法使用mixins 将scss 文件的内容导入另一个scss 文件？像这样的：

// media.scss
@mixin media($width, $url) {
  @media (min-width:$width) {
    @import url($url);
  }
};

@mixin small($url) {
  @include media(576, $url);
};

//main.scss
@import '../../styles/media.scss';
@include small('./styles/small.scss');
.menu {
  height: 4rem;
  border-bottom-left-radius: 10px;
  background-color: #202020;
}
//small.scss
.menu {
  background-color: aqua;
}

【问题讨论】：

标签： sass scss-mixins

【解决方案1】：

为了在 SCSS 中使用@mixin，您必须在您希望包含这些更改或样式规则的类选择器中使用@include。

例如，

 .menu {
   height: 4rem;
   border-bottom-left-radius: 10px;
   background-color: #202020;
   @include small($url)
   // @include (name of mixin)(arguments)  
}

或

.menu {
  background-color: aqua;
  @include small($url)
 }

这取决于你想使用 mixin 的类选择器。这在这种情况下，$url 将是实际值。

通常，最好创建一个单独的部分文件，其中将包含您创建的所有混音。这些在开头用下划线命名。例如，部分_media.scss 文件可以在main.scss 文件中导入为@import './media.scss'; 或@import '../../styles/media.scss';，具体取决于部分文件的相对路径。

【讨论】：