如何通过Sass基于业务数据动态生成currency-flag系列CSS类

实现逻辑 #

借助Sass的列表变量、@each循环和字符串插值能力，批量生成符合格式要求的样式规则，全程不需要重复书写固定结构的CSS代码。

具体实现代码 #

// 维护实际业务需要支持的货币代码列表，仅需填写真实用到的项即可
$used-currencies: (
  clp,
  usd,
  cny,
  eur,
  jpy,
  gbp
  // 后续新增支持的货币时，直接在这个列表追加对应代码就行
);

// 循环批量生成样式类
@each $currency in $used-currencies {
  // 利用Sass的#{}插值语法，动态拼接类名和资源路径
  .currency-flag-#{$currency}:before {
    background-image: url('~currency-flags/dist/square-flags/#{$currency}.svg');
  }
}

实际效果 #

上述代码经过Sass编译后，生成的CSS规则和你手动编写的单条规则完全一致，比如遍历到clp时就会自动生成和你初始定义一模一样的.currency-flag-clp:before样式。

实用注意点 #

• 不需要一开始就把270个货币代码全部塞进列表，仅维护业务实际触达的货币项，能避免生成大量无效CSS，控制打包后的样式体积。
• 拼接的资源路径要和项目构建工具对~路径别名的解析规则匹配，避免出现静态资源404的问题。
• 后续业务扩展新增货币支持时，仅需在列表中追加对应货币代码，不需要重复复制粘贴固定结构的CSS片段。

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