SASS生成CSS变量函数如何正确嵌入主SCSS/CSS文件？

你遇到的问题核心是Sass函数返回的是CSS变量声明的字符串，但直接把函数放在选择器块里时，Sass会把它当作一个无效的CSS属性，导致语法错误。下面给你两种可行的解决方法：

方法1：用插值语法#{}输出函数返回的声明字符串 #

首先确保你的Sass函数返回的是不带大括号、用分号分隔的CSS变量声明字符串，比如：

@function my-function($param1, $param2) {
  $output: '';
  // 这里替换成你的变量生成逻辑
  $output: $output + '--my-primary-color: red; ';
  $output: $output + '--object-1-left: #{$param1}px; ';
  $output: $output + '--object-2-left: #{$param2}px; ';
  $output: $output + '--object-3-left: calc(var(--object-1-left) + var(--object-2-left)); ';
  
  @return $output;
}

然后在:root选择器的声明块中，用#{}插值语法把函数结果直接输出为CSS代码：

:root {
  #{my-function(12, 8)}
}

编译后的CSS会是你想要的结果：

:root {
  --my-primary-color: red; --object-1-left: 12px; --object-2-left: 8px; --object-3-left: calc(var(--object-1-left) + var(--object-2-left)); 
}

如果希望输出的代码更美观（每行一个变量），可以在函数里给每个声明加上换行符\A，并用unquote()处理：

@function my-function($param1, $param2) {
  $output: '';
  $output: $output + unquote('--my-primary-color: red;\A');
  $output: $output + unquote('--object-1-left: #{$param1}px;\A');
  $output: $output + unquote('--object-2-left: #{$param2}px;\A');
  $output: $output + unquote('--object-3-left: calc(var(--object-1-left) + var(--object-2-left));');
  
  @return $output;
}

方法2：用Sass混合宏（@mixin）替代函数（更推荐） #

其实生成CSS声明集合的场景，用Sass混合宏比函数更合适——混合宏可以直接输出声明块内容，不需要手动拼接字符串，语法更清晰：

@mixin my-mixin($param1, $param2) {
  --my-primary-color: red;
  --object-1-left: #{$param1}px;
  --object-2-left: #{$param2}px;
  --object-3-left: calc(var(--object-1-left) + var(--object-2-left));
}

然后在:root里引入这个混合宏即可：

:root {
  @include my-mixin(12, 8);
}

编译后的CSS和方法1的换行版完全一致，而且代码维护起来更简单。

为什么你之前的方法行不通？ #

• 直接放在:root块里：Sass会把my-function(...)当作一个CSS属性名，但后面没有对应的属性值，所以触发语法错误。
• 单独写函数调用：CSS语法要求必须有选择器后跟声明块，单独的函数调用不符合这个规则，因此报错。
• 放在属性值里：函数返回的所有变量声明会被当作font-size的属性值，这显然不符合CSS规范，所以无效。

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