使用 mixin 导入 scss 文件的内容

Posted 2023-03-06

【中文标题】使用 mixin 导入 scss 文件的内容

【英文标题】：import content of scss file using mixin

【发布时间】：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;

【参考方案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';，具体取决于部分文件的相对路径。