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

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

1 个答案: