Symfony 6 Encore中如何将控制器变量传递至SCSS？

因为SCSS是构建阶段编译的静态样式，而Twig的{{ color }}是运行时的用户动态数据，无法直接传入已编译的SCSS文件。最实用的方案是通过**CSS自定义属性（变量）**实现桥接，具体步骤如下：

1. 在Twig模板中定义CSS自定义属性 #

在模板的<head>或目标元素上，将用户颜色值赋值给一个全局或局部CSS变量：

{# 全局变量：作用于整个页面 #}
<style>
  :root {
    --user-background-color: {{ color }};
  }
</style>

{# 或者局部变量：仅作用于特定元素 #}
<div class="user-dashboard" style="--user-background-color: {{ color }}">
  {# 页面内容 #}
</div>

2. 在SCSS中引用并复用该变量 #

在app.scss里，直接调用这个CSS自定义属性，也可以将其赋值为SCSS变量方便后续复用：

// 将CSS变量转为SCSS变量（可选，仅为了符合SCSS写法习惯）
$user-bg-color: var(--user-background-color);

// 使用变量编写样式
.user-dashboard {
  background-color: $user-bg-color;
  // 基于动态颜色扩展样式（注意：若需颜色运算，需确保传入的是RGB/RGBA格式）
  box-shadow: 0 0 10px rgba($user-bg-color, 0.2);
}

补充：处理颜色运算的兼容问题 #

如果需要对动态颜色做SCSS颜色运算（如lighten()、rgba()），建议在Twig中将十六进制颜色转为RGB格式：

{# 自定义Twig过滤器将十六进制转为RGB值（如#ff0000 → 255,0,0） #}
<style>
  :root {
    --user-bg-rgb: {{ color|hex_to_rgb }};
  }
</style>

然后在SCSS中这样使用：

.user-dashboard {
  background-color: rgb(var(--user-bg-rgb));
  border-color: rgba(var(--user-bg-rgb), 0.3);
}

注：如果没有现成的hex_to_rgb过滤器，可以自己在Symfony中实现一个简单的Twig扩展，或者直接在控制器中处理颜色格式后传递给模板。

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