这篇来介绍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; @btn-font-size-sm; @btn-border-radius-sm);   } }

其中的具体属性不多说了，不知道的可以百度属性就知道了，大概就是设置字体粗细、字体居中、不换行、过渡、定位、边框、激活、焦点、hover、disabled等样式，其中btn中调用了button-size函数。&-lg、&-sm设置大按钮和小按钮，调用了button-size函数

• button-size(设置按钮大小):

.button-size(@height; @padding; @font-size; @border-radius) {   padding: @padding;   font-size: @font-size;   border-radius: @border-radius;   height: @height; }

以height、padding、font-size、border-radius为输入参数来设置按钮大小，宽度通过padding和font-size就能设置宽度。

• 下一个部分是设置按钮类型为主按钮、次按钮、虚线按钮、危险按钮、幽灵按键样式函数：

.button-variant-primary(@color; @background) {   .button-color(@color; @background; @background);   &:hover,   &:focus {     .button-color(@color; ~`colorPalette("@{background}", 5)`; ~`colorPalette("@{background}", 5)`);   }    &:active,   &.active {     .button-color(@color; ~`colorPalette("@{background}", 7)`; ~`colorPalette("@{background}", 7)`);   }    .button-disabled(); }  .button-variant-other(@color; @background; @border) {   .button-color(@color; @background; @border);    &:hover,   &:focus {     .button-color(@primary-5; @background; @primary-5);   }    &:active,   &.active {     .button-color(@primary-7; @background; @primary-7);   }    .button-disabled(); }  .button-variant-danger(@color; @background; @border) {   

                    

                        
关键字：