SASS/SCSS mixin for button states

Question

I have created several mixins for a button to attempt to reduce duplication and contribute to the overall improvement of performance. I am looking for guidance on how to tighten this up so it is as DRY (Don't Repeat Yourself) as possible. Or is it already as DRY as possible?

Here is the code:

// mixin - button shape
@mixin buttonShape {
    vertical-align:middle;
    line-height:1.333rem;height:2.166rem;
    color:#282a2e;
    border-radius:0;
    margin-top:1.083rem;
    margin-bottom:.333rem;
    margin-right:1.073rem;
    border:none;
    transition: background-color .2s;
}

// mixin - button gradients
@mixin gradientNormal {
    background-color:#efefee;
    background:linear-gradient(to bottom,#efefee 0,#d0d0ce 100%);
    box-shadow:inset 0 0 0 .083rem #fff;outline:1px solid silver;
}

@mixin gradientHoverActive {
    background:linear-gradient(to bottom,#ffffff 0,#ffffff 100%);
    box-shadow:inset 0 0 0 .083rem #fff;outline:2px solid #e87722;
}


// normal state
.ui-button {
    font-size: 12px;
    @include buttonShape;
    @include gradientNormal;
}

// hover
.ui-button:enabled:hover,
.ui-button:focus {
    @include buttonShape;
    @include gradientHoverActive;
}

// active
.ui-button:enabled:active {
    @include buttonShape;
    @include gradientHoverActive;
}

Answer 1

Formatting

Format your code better. Put a space after the colon after properties. Don't put multiple properties in one line.

Use of SASS

Put your colors and lengths into variables so you can reuse them at other places, when they are supposed to be identical.

Why are the numbers not rounded? There is probably no visible difference between 1.073rem and 1.083rem and they probably could even be rounded to 1.1rem. If you are calcualting the values from something, then use SASS to do the calculations.

CSS itself

The buttons don't have a left margin.

The font-size either also belongs into the mixin, or removed entirely.

The mixin buttonShape shouldn't be repeated in the :hover/:active/ :focus rules.

If the rules .ui-button:enabled:hover, .ui-button:focus and .ui-button:enabled:active are supposed to be identical, then join them into one rule.

Unless you are explicitly declaring rules for disabled buttons the addition of the :enabled pseudo-class does not make sense.

Design

From a design and usability stand point it's not a great idea to have :hover, :focus and :active all look the same.