元编程：用哈希映射自动生成BEM命名系统

利用Sass的嵌套映射和字符串插值，构建一个自动化的BEM（Block Element Modifier）生成器，只需定义结构即可输出完整类名与样式。 · 难度：入门 · +10XP

元编程：用哈希映射自动生成BEM命名系统

本教程将展示如何通过一个映射定义block、element、modifier及其样式规则，然后让Sass自动生成如.block__element--modifier形式的类名并附加对应样式。你会用到@each循环、map-get以及字符串拼接技巧，同时解决选择器嵌套中的作用域问题，最终得到一个可配置的BEM框架。

$bem: ( 'card': ( elements: ( 'title': (font-size: 18px), 'body': (padding: 1em) ), modifiers: ( 'dark': (background: #000), 'rounded': (border-radius: 8px) ) ) ); @each $block, $config in $bem { .#{$block} { @each $elem, $styles in map-get($config, elements) { &__#{$elem} { @each $prop, $val in $styles { #{$prop}: $val; } } } @each $mod, $styles in map-get($config, modifiers) { &--#{$mod} { @each $prop, $val in $styles { #{$prop}: $val; } } } } }