CSS DRY button states -

is there way this repeating same code?

.button-hover {   color:                           $button-hover-font-color;   background-color:                $button-hover-color;   &:hover, &:focus, &:active, &:visited {     color:                           $button-hover-font-color;     background-color:                $button-hover-color;   } } 

yeah, try plain css syntax:

.button-hover, .button-hover:hover, .button-hover:focus, .button-hover:active, .button-hover:visited {     color:            $button-hover-font-color;     background-color: $button-hover-color; } 

or use mixin: (i know less syntax, guess it's similar whatever preprocessor using)

.button-hover {     color:            @button-hover-font-color;     background-color: @button-hover-color;      &:hover, &:focus, &:active, &:visited {         .button-hover();     } }