Как указать ссылку на текущий фон?

Question

[Pavel Pavel]

Как сослаться на текущий background-color с функцией lighten()?
К примеру есть 3 цвета: red, green, blue - и все они являются фоном отдельных элементов. Как сделать каждый из них ярче не переписывая каждый стиль по отдельности? Типо:

.block1
  background-color: red

.block2
  background-color: green

.block3
  background-color: blue

.block1, .block2, .block3
  &:hover
    background-color: lighten(*текущий цвет*, 10%)

Comments

[Rustam Bainazarov]

В переменную записывать.

Извините, я не помню, как там точно SASS, поэтому буду использовать SCSS.

Сделайте миксин:

@mixin section-background-color($color) {
    background-color: $color;

    &:hover {
        background-color: lighten($color, 10%);
    }
}

И вставляйте:

.block1 {
  @include section-background-color(red);
}

И будет это генерировать нужный вам CSS.

[Rustam Bainazarov]

Иных путей у вас нет.

[Pavel Pavel]

Рустам Байназаров,
Я пока додумался только до мапа и @each

$button-lighten:(name1: red, name2: blue)
.button
  @each $btn-name, $btn-color in $button-lighten
    &-#{$btn-name}
      background-color: lighten($btn-color, 10%)

Но ваш пример с миксинами в моем случае и удобнее и познавательнее. Спасибо!

[Rustam Bainazarov]

Pavel Pavel, цикл тут избыточен :))