scss 如何将它变成漂亮的SASS mixin？与@extend？

Posted 2021-05-18

	.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;
		}
	}

/* 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;
		}
		
	}
}