Answer the question
In order to leave comments, you need to log in
Is there a SASS solution for wrapping colors in separate CSS blocks?
The task was to make up a site, the sections of which will differ in color, but otherwise they will be absolutely identical.
For layout I use SASS with Compass.
Previously, for such things, I simply put all the color properties in a separate file, but since you have to follow the same style nesting structure this way, this is not a very productive solution. I would like to automatically render all color properties into separate blocks at compile time. Or at least make things easier for yourself in some other way.
Ideally I want to write something like:
.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 the question
In order to leave comments, you need to log in
Although Alexander Marchenko did not fully answer the question, he asked the right vector of thoughts...
Having searched carefully on the net, I did not find a suitable solution, I had to come up with it myself.
The result was found in the sharing of many features of SASS, here it is:
//переменные цветов
$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);
}
}
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question