Есть ли готовое SASS-решение для переноса цветов в отдельные блоки CSS?

Question

[Николай Маринкин]

Встала задача сверстать сайт разделы которого будут отличаться цветом, но в остальном будут абсолютно идентичными.
Для верстки использую SASS с Compass.
Ранее я для таких вещей просто выносил все свойства цветов в отдельный файл, но в виду того что так приходится соблюдать ту же структуру вложенности стилей - это не очень продуктивное решение. Мне бы хотелось автоматически вынести все цветовые свойства в отдельные блоки на этапе компиляции. Или хотя бы как нибудь иначе упростить себе задачу.

В идеале хочу писать что-нибудь вроде:

.container {
	$color: #000;
	
	&.red {
		$color: #900;
	}

	&.green {
		$color: #090;
	}

	&.blue {
		$color: #009;
	}

	.item {
		width: 100%;
		height: 100%;
		background: $color;
		border: 1px solid lighten($color);
	}
}

И получать на выходе:

.container .item {
	width: 100%;
	height: 100%;
	background: #000;
	border: 1px solid #000;
}

.container.red .item {
	background: #900;
	border-color: #900;
}

.container.green .item {
	background: #090;
	border-color: #090;
}

.container.blue .item {
	background: #009;
	border-color: #009;
}

Есть ли готовые инструменты для этого?

Answer 1

[Николай Маринкин]

Александр Марченко хоть и не в полной мере ответил на вопрос, но задал правильный вектор мыслей...

Поискав тщательно в сети я не нашел подходящего решения, пришлось придумать самому.
Результат нашелся в совместном использовании многих возможностей SASS, вот он:

//переменные цветов
$rainbow-map: (staff: #ffcc66, azaza: #f00);

//цветовые свойства
@each $class, $color in $rainbow-map {
	.#{$class}-color {
		color: $color;
	}
}

//миксины цветов
@mixin rainbow($property: color) {
	@each $class, $color in $rainbow-map {
		.#{$class} & {
			@extend .#{$class}-#{$property};
		}
	}
}

.container-one {
	.block-one {
		@include rainbow(color);
	}

	.block-two {
		@include rainbow(color);

		.child-block-one {
			@include rainbow(color);
		}
	}
}

Хоть это и не "идеальный способ" который я искал, он вполне приемлем. У меня есть заранее заданная палитра цветов в каждом разделе сайта и все свойства мне достаточно вывести в отдельный блок. Так и размер CSS файла будет не большим, и цвета не придется ставить вручную.

Answer 2

[_ _]

Сделайте миксины, не?

Comments

[Николай Маринкин]

На каждый раз где я буду использовать цветовые свойства?
Не вижу решения с миксинами. Я был бы очень благодарен, если бы вы привели пример.