使用css变量 --

1. 定义变量
:root {
    --button-height: 32px;
    --font-size: 14px;
    --button-bg: #ffffff;
    --button-active-bg: #eee;
    --button-radius: 4px;
    --color: #999;
    --border-color:#999;
    --border-color-hover:#666;

}
2.使用变量
.g-button {
    font-size: var(--font-size);
    height: var(--button-height);
    padding: 0 1em;
    font: inherit;
    border-radius: var(--button-radius);
    border: 1px solid var(--border-color);
    background: var(--button-bg);

}
.g-button:hover{
    border-color: var(--border-color-hover);
}
.g-button:active{
    border-color: var(--button-active-bg);
}
.g-button:focus{
    outline: none;
}