button样式篇一（ant Design React）

这篇来介绍button中elementUi、iview、ant中样式结构

ant Design react

ant-react中button分两个文件less:

• mixins.less：根据button功能样式不同封装成函数。
• index.less：调用mixins.less中的函数来声明button的相关class

我们先来看mixins.less的结构

• btn(基础样式，主要用设置按钮通用样式)：

.btn() {
  display: inline-block;//行内块元素
  font-weight: @btn-font-weight;//字体粗细
  text-align: center;//字体居中
  touch-action: manipulation;//浏览器只允许进行滚动和持续缩放操作
  cursor: pointer;//鼠标移上去形状
  background-image: none;//背景图片为空
  border: @border-width-base @border-style-base transparent;//边框透明
  white-space: nowrap;//不换行
  .button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);//padding height font-size  border-radius设置
  user-select: none;//文本不能被选择
  transition: all .3s @ease-in-out;//过渡
  position: relative;//相对定位

  > .@{iconfont-css-prefix} {
    line-height: 1;//行高不带单位是相对字体的比例
  }

  &,
  &:active,
  &:focus {
    outline: 0;//是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
  }

  &:not([disabled]):hover {
    text-decoration: none;//定义标准的文本
  }

  &:not([disabled]):active {
    outline: 0;
    transition: none;
  }

  &.disabled,
  &[disabled] {
    cursor: not-allowed;
    > * {
      pointer-events: none;//元素永远不会成为鼠标事件的target
    }
  }

  &-lg {
    .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
  }

  &-sm {
    .button-size(@btn-height-sm; @btn-padding-sm; @