@copyGrey : #333333; @tealLight : #1ABC9C; @teal : #16A085; @greenLight : #2ECC71; @green : #27AE60; @blueLight : #3498DB; @blue : #2980B9; @purpleLight : #9B59B6; @purple : #8E44AD; @steelLight : #34495E; @steel : #2C3E50; @yellowLight : #F1C40F; @yellow : #F39C12; @orangeLight : #E67E22; @orange : #D35400; @redLight : #E74C3C; @red : #C0392B; @silverLight : #ECF0F1; @silver : #BDC3C7; @greyLight : #95A5A6; @grey : #7F8C8D; #backgroundColors { &.tealLight { background-color : @tealLight; }; &.teal { background-color : @teal; }; &.greenLight { background-color : @greenLight; }; &.green { background-color : @green; }; &.blueLight { background-color : @blueLight; }; &.blue { background-color : @blue; }; &.purpleLight { background-color : @purpleLight; }; &.purple { background-color : @purple; }; &.steelLight { background-color : @steelLight; }; &.steel { background-color : @steel; }; &.yellowLight { background-color : @yellowLight; }; &.yellow { background-color : @yellow; }; &.orangeLight { background-color : @orangeLight; }; &.orange { background-color : @orange; }; &.redLight { background-color : @redLight; }; &.red { background-color : @red; }; &.silverLight { background-color : @silverLight; }; &.silver { background-color : @silver; }; &.greyLight { background-color : @greyLight; }; &.grey { background-color : @grey; }; } #backgroundColorsHover { &.tealLight:hover { background-color : @tealLight; }; &.teal:hover { background-color : @teal; }; &.greenLight:hover { background-color : @greenLight; }; &.green:hover { background-color : @green; }; &.blueLight:hover { background-color : @blueLight; }; &.blue:hover { background-color : @blue; }; &.purpleLight:hover { background-color : @purpleLight; }; &.purple:hover { background-color : @purple; }; &.steelLight:hover { background-color : @steelLight; }; &.steel:hover { background-color : @steel; }; &.yellowLight:hover { background-color : @yellowLight; }; &.yellow:hover { background-color : @yellow; }; &.orangeLight:hover { background-color : @orangeLight; }; &.orange:hover { background-color : @orange; }; &.redLight:hover { background-color : @redLight; }; &.red:hover { background-color : @red; }; &.silverLight:hover { background-color : @silverLight; }; &.silver:hover { background-color : @silver; }; &.greyLight:hover { background-color : @greyLight; }; &.grey:hover { background-color : @grey; }; }