【Nova UI】五、解锁 SASS 魔法，优雅实现 BEM 规范

本文链接：https://blog.youkuaiyun.com/qq_40230003/article/details/146931442

序言

此前，我们领略了 JavaScript 为 BEM 规范在交互逻辑实现上的精彩呈现🎯，而在样式设计领域，不同工具各有所长。SASS 作为 CSS 预处理器中的佼佼者🌟，能让我们的样式代码更加简洁、高效且易于维护。相较于原生 CSS 实现 BEM 规范，SASS 有着独特的优势。那么，如何借助 SASS 的强大功能💪，更优雅地实现 BEM 规范，让样式管理再上一个台阶🧐？本文将深入剖析 SASS 实现 BEM 规范的方法与技巧，为你的前端开发工具箱增添关键技能🔧。

定义 BEM 常量🏗️

在前端项目里，借助 SASS 落实 BEM 规范时，我们在packages/theme-chalk/src/mixins路径下，新添了config.scss文件📄。它的作用可不一般，专门用来定义一系列与 BEM 规范紧密相关的常量。

$namespace: 'n';
$element-separator: '__';
$modifier-separator: '--';
$state-prefix: 'is-';

这里的$namespace确定了组件样式的命名空间，方便在代码库中识别🏷️。$element-separator以双下划线清晰连接块与元素，明确它们在类名中的所属关系。$modifier-separator用双连字符，让修饰符添加变得有序📏。$state-prefix则为组件状态标识统一前缀，便于区分不同状态🔍。

这些常量的定义，为后续 SASS 中 BEM 规范的实现筑牢根基🏗️，让样式编写与 BEM 规范得以完美融合。

SASS 中 BEM 规范的完美落地🎨

在同一目录（packages/theme - chalk/src/mixins）下，我们进一步新增bem.scss文件📄，这一文件将成为 BEM 规范在 SASS 中落地的核心载体。

定义块（Block）：构建样式的基石🧱

在 SASS 的世界里，我们借助@mixin指令，以一种极具匠心的方式定义块。

@mixin b($block) {
  $B: $namespace + '-' + $block;
  .#{$B} {
    @content;
  }
}

当我们调用@mixin b($block)并传入具体块名，例如button时，变量$B会将预设的命名空间$namespace（假设为n）与$block（即button）拼接，生成n-button。随后，.#{$B}作为类选择器，而@content则如同一个灵活的容器🧰，允许我们在使用该混合宏时，轻松插入自定义的样式规则。比如：

@include b(button) {
  background-color: #4285F4;
  color: white;
}

最终，SASS 会将其编译为：

.n-button {
  background-color: #4285F4;
  color: white;
}

通过这种方式，我们不仅实现了块的灵活定义，还极大地提升了代码的复用性，让样式代码更加简洁、清晰。

定义元素（Element）：细化样式的拼图🧩

接下来，看看如何定义元素。

@mixin e($element) {
  @at-root {
    #{& + $element-separator + $element} {
      @content;
    }
  }
}

假设我们在button块中使用这个混合宏来定义按钮内的图标元素icon。当在块选择器.n-button的样式中调用@include e(icon)时，&代表当前的块选择器.n-button，$element-separator是我们预设的__，$element为icon。最终生成的选择器为.n-button__icon，我们便可以在@content中编写该元素的样式。例如：

@include b(button) {
  @include e(icon) {
    width: 20px;
    height: 20px;
  }
}

编译后得到：

.n-button__icon {
  width: 20px;
  height: 20px;
}

这种方式让元素与块的关系一目了然，方便我们管理和维护组件内部的样式。

定义修饰（Modifier）：丰富样式的调色板🎨

对于修饰符的定义，SASS 同样提供了优雅的解决方案。

@mixin m($modifier) {
  @at-root {
    #{& + $modifier-separator + $modifier} {
      @content;
    }
  }
}

若要为button块添加一个primary修饰符来改变其样式，当在.n-button的样式中调用@include m(primary)时，&为.n-button，$modifier-separator是--，$modifier为primary，生成.n - button--primary。然后在@content中设置样式：

@include b(button) {
  @include m(primary) {
    background - color: #28a745;
    color: white;
  }
}

编译后：

.n-button--primary {
  background - color: #28a745;
  color: white;
}

通过这样的方式，我们能够轻松地为块或元素添加不同的修饰效果，满足多样化的样式需求。

定义状态（State）：赋予样式动态生命力### 💫

@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}

假设要定义按钮的disabled状态，在.n-button的样式中调用@include when(disabled)，&是.n-button，$state-prefix为is-，$state为disabled，生成.n-button.is-disabled。在@content中设置该状态下的样式：

@include b(button) {
  @include when(disabled) {
    background - color: #ccc;
    color: #999;
    cursor: not-allowed;
  }
}

编译后得到：

.n-button.is-disabled {
  background-color: #ccc;
  color: #999;
  cursor: not-allowed;
}

这使得我们能够根据组件的不同状态，灵活调整样式，增强用户体验。

通过在bem.scss中对块、元素、修饰符和状态的精妙定义，我们成功地在 SASS 中实现了 BEM 规范，为前端样式开发带来了更高的效率、更强的可维护性和更清晰的代码结构。

🦀🦀感谢看官看到这里，如果觉得文章不错的话🙌，点个关注不迷路⭐。
诚邀您加入我的微信技术交流群🎉，群里都是志同道合的开发者👨‍💻，大家能一起交流分享摸鱼🐟。期待与您在群里相见🚀，咱们携手在开发路上共同进步✨ ！
👉点我

感谢各位大侠一路相伴，实在感激！不瞒您说，在下还有几个开源项目 📦，它们就像精心培育的幼苗 🌱，急需您的浇灌。要是您瞧着还不错，麻烦动动手指，给它们点亮几颗 Star ⭐，您的支持就是它们成长的最大动力，在此谢过各位大侠啦！

Nova UI组件库：https://github.com/gmingchen/nova-ui
基于 Vue3 + Element-plus 管理后台基础功能框架
预览：https://admin.gumingchen.icu
Github：https://github.com/gmingchen/agile-admin
Gitee：https://gitee.com/shychen/agile-admin
基础版后端：https://github.com/gmingchen/java-spring-boot-admin
文档：http://admin.gumingchen.icu/doc/

基于 Vue3 + Element-plus + websocket 即时聊天系统
预览：https://chatterbox.gumingchen.icu/
Github：https://github.com/gmingchen/chatterbox
Gitee：https://gitee.com/shychen/chatterbox

基于 node 开发的后端服务：https://github.com/gmingchen/node-server