全局css配置

config.less
@charset “utf-8”;
/----------- 重置样式 重要配置 ----------------/

*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html,body{-webkit-text-size-adjust:none;text-size-adjust:none;background: #f4f4f4;}
html,body,input,textarea,select,button{font-size:12px;font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;color:#333;outline:none;padding:0}
body{line-height:1.4}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form,dl,dt,dd{margin:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
ul,ol,li{padding:0;list-style-type:none}
a ,img{border:0}
table{border-collapse:collapse;border-spacing:0}
textarea{overflow:auto;vertical-align:top;resize:none}
a{color:#333;text-decoration:none;outline:none; blr:~"expression(this.onFocus=this.blur())";}
a:hover{text-decoration:none;color:#409eff;}
img{vertical-align:middle}
input[type=button]{-webkit-appearance:none;outline:none;border: 0;cursor: pointer;}
i,em{font-style:normal}

/* ================ 不重要样式 方便自己用 习惯配置 ============ */

.fl{float: left;}
.fr{float: right;}

.txtLength{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lineBlock{display:inline-block;zoom:1;*display:inline;font-size:12px;letter-spacing:normal;word-spacing:normal;vertical-align:top;}

.lbBox{font-size:0px;*word-spacing:-1px;}
.lbUl{font-size:0px;*word-spacing:-1px;}
.lbUl li{display:inline-block;zoom:1;*display:inline;font-size:12px;letter-spacing:normal;word-spacing:normal;vertical-align:top;}

.clear{clear:both;zoom:1} /*清除浮动*/
.clear:after{clear:both;display:block;height:0;font-size:0;content:".";visibility:hidden;}

.content{width:1200px;margin:0 auto;}

color.less

/*主色调*/
@colorA:#FF4400;
@colorA_1:#FF4466;

@colorA1: #ff9000;
@colorA1_1: #ff9066;

@colorA2: #ffe4dd;
@colorA_2: #ffe4ff;

/*黑白系列*/
@color00: #000000;
@color33: #333333;
@colorCC: #cccccc;
@colorEF: #efefef;
@colorFF: #ffffff;

组件less btn.less

@import "./color.less";
@btn: btn;
@primary: primary;
/*按钮基础属性*/
.@{btn}{
    width: 78px;
    height: 25px;
    line-height: 25px;
    margin: 0 5px;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    color: @color00;
    background-color: @colorFF;
    border: 1px solid @colorEF;
    &:hover{
        color: @colorA;
        border-color: @colorA2;
        background-color: @colorA_2;
    }
}
/*主要按钮*/
.@{btn}.@{primary}{
    color: @colorFF;
    background-color: @colorA;
    border-color: @colorA;
    &:hover{
        background-color: @colorA_1;
        border-color: @colorA_1;
    }
}