SCSS是否支持在变量中使用数组或对象存储样式属性？

SCSS 原生支持类数组、类对象的数据结构，你要的把整组段落样式存在变量里随时调用的需求完全可以实现：

• 你提到的「数组」对应 SCSS 内置的 List 类型，是有序值集合，适合存储同类型的顺序关联值（比如间距梯度、字号序列），不适合存键值配对的CSS样式
• 你提到的「对象」对应 SCSS 内置的 Map 类型，是键值对集合，刚好匹配CSS属性名+属性值的存储结构，是实现你需求的最合适方案

具体实现代码 #

首先定义存储段落默认样式的$paragraph变量：

$dark-700: #1d2129; // 项目内已定义的颜色变量
// 用Map类型存储整组段落样式
$paragraph: (
  color: $dark-700,
  font-size: 14px,
  line-height: 20px
);

用法1：直接在选择器中遍历输出样式 #

不需要额外封装mixin也能直接调用变量批量生成样式：

.article-paragraph {
  // 遍历Map逐行输出CSS属性
  @each $property, $value in $paragraph {
    #{$property}: $value;
  }
  // 追加自定义样式直接写在后面即可
  margin-bottom: 1em;
  text-indent: 2em;
}

用法2：兼容原有mixin写法，支持自定义覆盖 #

如果你想保留之前的@include paragraph调用习惯，可以把原有mixin改造成基于$paragraph变量的灵活版本，支持传入自定义样式覆盖默认值：

@mixin paragraph($override-styles: ()) {
  // 合并默认样式和传入的自定义样式，传入值优先级更高
  $merged-styles: map-merge($paragraph, $override-styles);
  @each $property, $value in $merged-styles {
    #{$property}: $value;
  }
}

// 调用默认段落样式
.common-text {
  @include paragraph;
}

// 调用时覆盖个别属性，生成强调段落样式
.emphasis-text {
  @include paragraph((
    font-size: 16px,
    font-weight: 500,
    line-height: 24px
  ));
}

注意：存储CSS样式集合时优先用Map类型，不要用List按索引存值，否则后续调整样式顺序时很容易出现属性值匹配错误，维护成本很高。

内容的提问来源于stack exchange，提问作者Asimov-JS