N
N
Nikolay Marinkin2015-06-12 23:00:27
css
Nikolay Marinkin, 2015-06-12 23:00:27

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

And get the output:
.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;
}

Are there ready made tools for this?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
N
Nikolai Marinkin, 2015-06-14
@NicoBurno

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

While not the "perfect way" I was looking for, it's perfectly acceptable. I have a predetermined color palette in each section of the site, and I just need to display all the properties in a separate block. So the size of the CSS file will not be large, and the colors will not have to be set manually.

_
_ _, 2015-06-12
@AMar4enko

Make mixins, will you?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question