Skip to content

Instantly share code, notes, and snippets.

@colorful-tones
Last active August 29, 2015 14:04
Show Gist options
  • Save colorful-tones/24b1698056bc1f81f7c9 to your computer and use it in GitHub Desktop.
Save colorful-tones/24b1698056bc1f81f7c9 to your computer and use it in GitHub Desktop.
How do I make this into nice SASS mixin? with @extend?
/* COLORS FOR CAR Types */
$mini-van-base: #344556; //blue
$sedan-base: #b43d3d; //red
$suv-base: #7a4c8e; //purple
$truck-base: #d0922f; //yellow
$convertible-base: #ff5831; //orange
@each $car_type, $color in
( mini-van, $mini-van-base ),
( sedan, $sedan-base ),
( suv, $suv-base ),
( truck, $truck-base ),
( convertible, $convertible-base ) {
.#{$car_type} {
.car-info-wrap {
background-color: $color;
}
.cs_download,
.tile-play,
.tile-heart {
&:hover {
color: lighten( $color, 16% );
border-color: lighten( $color, 16% );
}
}
.car-info-btn,
.cs-player-link-queue {
color: lighten( $color, 16% );
&:hover {
color: lighten( $color, 40% );
}
}
.cars-tile-category {
.fa {
color: $color;
}
}
.see-all:before {
width: 48px;
height: 48px;
background-image: url('images/see-all-#{$car_type}.png');
content: ' ';
position: absolute;
top: -1px;
right: 0;
}
}
}
.red-corvette {
.tile-category {
.fa {
color: $red-corvette-base;
}
}
.see-all:before {
width: 48px;
height: 48px;
background-image: url('images/see-all-red-corvette.png');
content: ' ';
position: absolute;
top: -1px;
right: 0;
}
}
.grey-toyota {
.tile-category {
.fa {
color: $grey-toyota-base;
}
}
.see-all:before {
width: 48px;
height: 48px;
background-image: url('images/see-all-grey-toyota.png');
content: ' ';
position: absolute;
top: -1px;
right: 0;
}
}
.yellow-fiesta {
.tile-category {
.fa {
color: $yellow-fiesta-base;
}
}
.see-all:before {
width: 48px;
height: 48px;
background-image: url('images/see-all-yellow-fiesta.png');
content: ' ';
position: absolute;
top: -1px;
right: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment