如何向Sass布局文件传递参数？解决模板变量未找到问题

你遇到的问题核心是想让通用的layout.scss能适配不同主题的变量配置，而@import确实不支持直接传参，不过我们有几种实用的替代方案来实现这个需求：

1. 使用!default定义默认变量（最推荐的基础方案） #

这个思路是让布局文件先预设默认变量，主题文件在导入布局前自定义变量，这样主题变量会自动覆盖默认值，变相实现“传参”效果。

先修改你的layout.scss，给变量加上!default标记：

// layout.scss
$primary-color: #ccc !default; // 默认灰色作为 fallback
$secondary-color: #ddd !default;
$tertiary-color: #eee !default;

.home_icon {
  border: 1px solid $primary-color !important;
  color: $primary-color !important;
  &:hover {
    background-color: $secondary-color !important;
    color: #fff !important;
    border-color: #fff !important;
  }
}

然后在green.scss里先定义主题变量，再导入布局文件：

// green.scss
$primary-color: #6ddba4;
$secondary-color: #6ddba4;
$tertiary-color: #6ddba4;
@import 'layout/layout.scss';

这样layout.scss里的变量就会被你自定义的绿色值替换，完美适配主题需求。

2. 使用Mixins封装可复用样式 #

如果你的布局逻辑更复杂，或者需要传递独立的参数，可以把样式封装成带参数的混合宏，在主题文件里调用时传入变量：

调整layout.scss为mixin形式：

// layout.scss
@mixin home-icon-styles($primary, $secondary) {
  .home_icon {
    border: 1px solid $primary !important;
    color: $primary !important;
    &:hover {
      background-color: $secondary !important;
      color: #fff !important;
      border-color: #fff !important;
    }
  }
}

然后在green.scss里导入并调用这个mixin：

// green.scss
@import 'layout/layout.scss';

$primary-color: #6ddba4;
$secondary-color: #6ddba4;
@include home-icon-styles($primary-color, $secondary-color);

这种方式灵活性更高，适合需要精准控制多个参数的场景。

3. 使用Sass Modules的@use ... with（现代Sass方案） #

如果你用的是较新版本的Sass（Dart Sass 1.23+），官方推荐用@use替代@import，它支持通过with关键字直接向模块传递变量，还能避免变量污染：

先在layout.scss保留默认变量（可选）：

// layout.scss
$primary-color: #ccc !default;
$secondary-color: #ddd !default;

.home_icon {
  border: 1px solid $primary-color !important;
  color: $primary-color !important;
  &:hover {
    background-color: $secondary-color !important;
    color: #fff !important;
    border-color: #fff !important;
  }
}

然后在green.scss里用@use导入并传参：

// green.scss
@use 'layout/layout.scss' with (
  $primary-color: #6ddba4,
  $secondary-color: #6ddba4
);

这是最现代的实现方式，有更清晰的作用域控制，是未来Sass的主流用法。

内容的提问来源于stack exchange，提问作者Jeroen