SCSS中如何用单个变量存储并复用多个CSS属性？

SCSS的普通变量无法直接存储多个CSS属性（这就是你遇到语法错误的原因——普通变量仅支持单一值，比如单个颜色、长度），但可以通过以下两种常用方式实现多属性的复用，完美适配嵌套写法：

1. 使用混合宏（@mixin）封装属性块 #

这是最直接的解决方案，混合宏专门用来封装可复用的CSS属性集合，甚至可以包含嵌套的伪类、媒体查询等逻辑。

示例代码：

// 定义包含基础样式与hover状态的混合宏
@mixin link-styles {
  color: #2563eb;
  text-decoration: none;
  transition: color 0.2s ease;

  &:hover {
    color: #1d4ed8;
    text-decoration: underline;
  }
}

// 嵌套场景中调用
.header-nav {
  .nav-link {
    @include link-styles;
    // 局部额外样式
    padding: 0.4rem 0.8rem;
  }
}

.card {
  .card-action-link {
    @include link-styles;
    // 局部额外样式
    font-weight: 600;
  }
}

如果需要拆分基础样式和hover状态分别复用，也可以拆成两个独立的混合宏，按需调用。

2. 使用映射（Map）+ 遍历管理属性 #

如果需要更灵活地管理多组属性（比如统一修改属性值），可以用SCSS的Map存储键值对，再通过@each遍历输出属性。

示例代码：

// 定义基础属性映射
$link-base-map: (
  color: #2563eb,
  text-decoration: none,
  transition: color 0.2s ease
);

// 定义hover属性映射
$link-hover-map: (
  color: #1d4ed8,
  text-decoration: underline
);

// 封装成混合宏简化调用
@mixin link-styles {
  @each $prop, $value in $link-base-map {
    #{$prop}: $value;
  }

  &:hover {
    @each $prop, $value in $link-hover-map {
      #{$prop}: $value;
    }
  }
}

// 嵌套中使用
.product-card {
  .product-link {
    @include link-styles;
    font-size: 1.1rem;
  }
}

这种方式的好处是，所有属性值都集中在Map里，后续要修改颜色或其他属性时，直接修改Map即可，无需逐个修改样式块。

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