SASS Lighten с использованием стиля фона цвета элемента

Question

Можно ли заставить SASS использовать background-color стиля своего элемента в качестве переменной для использования в его функциях?

В настоящее время я генерирую эти значения в нашем API и передаю их вниз, но это будетбыло бы проще, если бы это было чем-то, что я мог бы просто сделать с SASS.

@function set-text-color($color) {
  @if (lightness( $color) > 40) {
    @return black;
  }
  @else {
    @return white;
  }
}

.example {
  .heading {
    font-size: 1.5em;
    padding: 1em;
    // color:set-text-color('element background colour');
  }
  .description {
    padding: 1em;
    // background: lighten('element background colour', 30%);
    // color:set-text-color('element background colour');
  }
}

<div class="example">
  <div class="heading" style="background-color: red;">
    Heading
  </div>
  <div class="description" style="background-color: red;">
    Nullam id sollicitudin mauris. Morbi vestibulum ullamcorper leo vel tristique.
  </div>
</div>
<div class="example">
  <div class="heading" style="background-color: yellow;">
    Heading
  </div>
  <div class="description" style="background-color: yellow;">
    Nullam id sollicitudin mauris. Morbi vestibulum ullamcorper leo vel tristique.
  </div>
</div>
<div class="example">
  <div class="heading" style="background-color: green;">
    Heading
  </div>
  <div class="description" style="background-color: green;">
    Nullam id sollicitudin mauris. Morbi vestibulum ullamcorper leo vel tristique.
  </div>
</div>
<div class="example">
  <div class="heading" style="background-color: blue;">
    Heading
  </div>
  <div class="description" style="background-color: blue;">
    Nullam id sollicitudin mauris. Morbi vestibulum ullamcorper leo vel tristique.
  </div>
</div>

Answer 1

Нет, вы не можете сделать это напрямую в SASS: вы не можете получить произвольные значения свойств CSS.

Однако вы можете создать переменную SASS для вашего цвета фона, а затем использовать ее в своей функции следующим образом:

@function set-text-color($color) {
  @if (lightness( $color) > 40) {
    @return black;
  }
  @else {
    @return white;
  }
}

$bg-color-1 = #fff;
$bg-color-2 = #000;

.example {
  .heading {
    font-size: 1.5em;
    padding: 1em;
    color:set-text-color($bg-color-1);
  }
  .description {
    padding: 1em;
    background: lighten($bg-color-2, 30%);
    color:set-text-color($bg-color-2);
  }
}

Вы даже можете объединить эти два с миксином, например, так:

@mixin set-bg-color($bg-color:$bg-color-1){
     background-color: $bg-color;
     color: set-text-color($bg-color);
}

.example {
  .heading {
    font-size: 1.5em;
    padding: 1em;
    @include set-bg-color;
  }
  .description {
    padding: 1em;
    @include set-bg-color($bg-color-2);
  }
}