前言

警告：本文的作者十分任性，不定期更新各种前端文章。所有的对代码的理解都不会使用专业的语言，适合新手阅读。当然也欢迎各路大神指正，至于改不改看心情~（ball ball you 多给点意见吧）。篇目只针对组件进行解析，对于整体的饿了么实现逻辑待我整理过后再看看。好，废话不多说直接进入正题。

阅读所需技能

vue相关知识
饿了么ui相关知识
scss相关知识

文档解析

1.size （决定组件尺寸）

首先，从主文件button.vue上可以知道组件的尺寸由buttonSize决定

而buttonSize定义在计算属性中

由size、_elFormItemSize、另一个size决定。其中this.size定义在props中就是我们在使用时的size值。

而_elFormItemSize而定义在inject中

为祖先组件中定义的，依据名称猜测这边为form组件中定义的size值（待验证）。

而最后一个size值应为整个element定义的size值（待验证）。

三者的值将按顺序取第一个有定义的值作为结果，最终在组件上定义了一个el-button--xx的class，从api上看class可能被定义为el-button--medium，el-button--small，el-button--mini。

知道了class后从样式主文件入手，开始就使用了一个方法

这个b() 定义在mixins.scss中

可以知道最终定义了一个$B的class，而$B定义为$namespace加上传入的值。

而$namespace在config.scss中定义

所以最终生成了我们在button组件都能看到的el-button。

其中许多值定义在var.scss中，自行查看。

接下来我们继续查看到

这边有三个函数调用，并且传入medium、small、mini，推测class定义在这。这个m()定义在mixins.scss里面。

&代表的是父选择器，在这边是包括在上面的选择器中也就是el-button，接下来循环了传入的参数并且拼接出了新的选择器，$modifier-separator定义在config.scss中

所以综上最后$currentSelector的值为el-button--xx，在事例中为el-button--medium，由于前面跟上了@at-root，所以此选择器是定义在根节点中的，并不是嵌套的形式。

接着我们看看里面的定义。首先，调用了button-size()用了此方法定义在_button.scss中

非常简单，这个方法将传入的四个参数分别设置了的padding、font-size、border-radius以及在加上了另一个子选择器is-round并对应设置其padding，这边应该是用于圆角按钮的实现，跳过。至此一个el-button--medium选择器设置完毕。如图。

2.type（决定组件类型）

主文件button.scss上可以发现组件的类型就是由传入的type决定的

若不传入则默认值为default

故这边给组件添加了一个可能为el-button--default、el-button--primary、el-button--success 、el-button--warning 、el-button--danger 、el-button--info 、el-button--text的class。

从button.scss中找到

首先m()为在根节点定义el-button--primary的class，其中button-variant()定义在_button.scss中传入的三个参数均在var.scss中定义的常量。

看下来是正常的设置几个样式以及各种状态的样式，其中的常量基本都在var.scss中定义，值得提的几个点，mix()是scss中的方法用于按照百分比混合颜色，后面三个css分别为 .el-button--primary .is-active、.el-button--primary .is-disabled、.el-button--primary .is-plain为其他api下按钮的表现，这边先跳过。

至此简单的primary、success、warning、danger、info设置的css就是这样。