Skip to content

Instantly share code, notes, and snippets.

@bertoort
Last active May 9, 2016 21:24
Show Gist options
  • Save bertoort/f1678f3c675fe78c2e9ad6594aa39dfc to your computer and use it in GitHub Desktop.
Save bertoort/f1678f3c675fe78c2e9ad6594aa39dfc to your computer and use it in GitHub Desktop.
Refactor the following css code to sass. Use variables, mixins, parent selectors, and nested selectors
input[type='submit'], input[type=button], button {
width: 15%;
height: 30px;
color: #EDFFF9;
background: #40FD65;
border: 3px solid rgba(#666, 0.3);
}
input[type='submit']:hover , input[type='button']:hover, button:hover {
width: 15%;
height: 30px;
color: #666;
background: rgba(#72AAD0, 0.7);
border: 3px solid rgba(#666, 0.3);
}
input[type='submit']:active , input[type='button']:active, button:active {
width: 15%;
height: 30px;
color: #666;
background: #72AAD0;
border: 3px solid #89DDFF;
}
$black: #666;
$white: #EDFFF9;
$green: #40FD65;
$blue: #89DDFF;
$lightblue: #72AAD0;
@mixin button($font-color, $background-color, $border-color) {
width: 15%;
height: 30px;
color: $font-color;
background: $background-color;
border: 3px solid $border-color;
}
input[type='submit'], input[type=button], button {
@include button($white, $black, rgba($black, 0.3))
&:hover {
@include button($black, rgba($lightblue, 0.7), rgba($black, 0.3))
}
&:active {
@include button($black, $lightblue, rgba($blue, 0.3))
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment