Sass函数示例出现解析错误，请求用函数实现Mixin样式功能的方案

Hey there! Let's break down why your code is throwing an error and how to get it working with just Sass functions, like you want to test.

The Root of the Error #

Your current code tries to return a raw CSS style block from a function, but that's not how Sass functions work. Unlike mixins (which are designed to output CSS directly), functions exist to compute and return values—things like colors, numbers, strings, or Sass maps (key-value collections). The parse error happens because Sass doesn't recognize that object-like syntax as a valid return value for a function.

Working Solution with Pure Functions #

Instead of returning a style block, have your function return a Sass map, then use an @each loop to convert that map into CSS declarations. Here's the corrected code:

@function alpha($background, $color, $font-size){
  // Return a Sass map of properties and values
  return (background: $background, color: $color, font-size: $font-size);
}

div {
  // Loop through the map to apply each style property
  @each $property, $value in alpha(yellow, violet, 24px) {
    #{$property}: $value;
  }
}

p {
  @each $property, $value in alpha(blue, orange, 20px) {
    #{$property}: $value;
  }
}

How This Works #

1. The alpha() function now returns a structured Sass map instead of raw CSS.
2. In each selector, we use @each to iterate over every key-value pair in the map returned by alpha().
3. We interpolate the property name (#{$property}) and set it to the corresponding value, which outputs the CSS you want.

A Quick Note on Functions vs. Mixins #

While you can use functions in this way to replicate mixin-like behavior, they're not perfect replacements:

• Mixins are optimized for directly emitting CSS and can include logic like @if/@else conditions or @content blocks.
• Functions are best for reusable calculations or returning data that you'll use elsewhere in your styles.

But this example does prove that with a little extra work (using maps and loops), you can use functions to achieve similar style reuse!

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