打开elementUI源码，跟我一起读懂样式封装的艺术

elementUI 是一款基于 Vue.js 的开源 UI 框架，它提供了一套丰富的组件库，可以帮助开发者快速搭建出漂亮的网页界面。elementUI 的组件样式采用 scss 语言编写，scss 是一种扩展的 CSS 语言，它支持变量、函数和 mixin 等特性，可以帮助开发者更轻松地编写和维护样式代码。

在 elementUI 中，组件的样式代码通常放在一个单独的 scss 文件中，这个文件会包含所有与该组件相关的样式代码。例如，Button 组件的样式代码位于 packages/button/src/button.scss 文件中。

在 button.scss 文件中，首先定义了 Button 组件的一些基础变量，例如字体、颜色和边框样式。然后，使用这些变量来编写 Button 组件的样式代码。例如，以下代码定义了 Button 组件的默认样式：

.el-button {
  font-size: 14px;
  color: #fff;
  background-color: #409eff;
  border: 1px solid #409eff;
  padding: 10px 15px;
  border-radius: 4px;
}

除了默认样式，elementUI 还提供了多种主题样式，开发者可以根据自己的喜好选择不同的主题样式。例如，以下代码定义了 Button 组件的「primary」主题样式：

.el-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}

在 elementUI 中，组件的样式代码不仅可以定义在单独的 scss 文件中，还可以定义在组件的 HTML 模板中。例如，以下代码在 Button 组件的 HTML 模板中定义了 Button 组件的「disabled」状态样式：

<template>
  <button :class="['el-button', `el-button--${size}`, { 'is-disabled': disabled }]">
    {{ $slots.default }}
  </button>
</template>

在上面的代码中，.is-disabled 类定义了 Button 组件的「disabled」状态样式。当 Button 组件处于「disabled」状态时，这个类就会被添加到 Button 组件的 class 列表中，从而应用「disabled」状态样式。

通过阅读 elementUI 组件源码，我们可以学习到如何使用 scss 语言编写和维护样式代码。我们还可以学习到如何将组件的样式代码组织成单独的文件或 HTML 模板，以及如何使用组件的样式代码来定义组件的不同状态样式。