SASS 使用元素样式背景颜色变亮

Question

是否可以让 SASS 使用其元素样式的背景颜色作为变量以在其函数中使用？

目前我正在我们的 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 结合起来：

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