css SASS检测颜色暗度以确定风格

xvw2m8pv 于 2022-12-15 发布在其他

关注(0)|答案(2)|浏览(133)

我正在尝试做一个mixin，它可以检测是显示深色文本（如果传入buttonStyles的颜色是浅色）还是浅色文本（用于传递深色）。我记得有一种方法可以用LESS来完成，我想知道是否有一种SASS方法。
考虑以下SCSS：

$white: #fff;
$text: #393939;
$font-std: 18px;
$transition-std: 0.4s ease all;
$primary: #f8e421;
$secondary: #354052;

@mixin buttonStyles($color) {
    font-size: $font-std;
    color: $text;
    padding: 1rem 3rem;
    background-color: $color;
    color: $white;
    transition: $transition-std;

    &:hover {
        cursor: pointer;
        background-color: lighten($color, 15%);
    }
    &:focus {
        background-color: lighten($color, 10%);
    }
    &:active {
        background-color: lighten($color, 25%);
    }
}
.btnPrimary {
    @include buttonStyles($primary);
}
.btnSecondary {
    @include buttonStyles($secondary);
}

还有这个html：

<button class='btnSecondary'>secondary</button>
<button class='btnPrimary'>primary</button>

第二个按钮比第一个按钮更清晰。我知道我可以传递第二个参数来设置文本颜色，但我想知道是否有一个更干净的，自动的方法，因为使用LESS？（不幸的是，我不记得使用LESS是如何完成的）
实时演示：https://jsfiddle.net/3v0ckeq9/5/
谢谢
编辑：
我已经添加了这个函数，几乎看起来工作：

@function ligthOrDark($color) {
    $result: red;

    @if (blackness($color) == 50) { // fails with > 50 or < 50
        $result: green;
    }

    @return $result;
}

但问题是，当试图确定颜色是否大于50（或小于50）时，SASS会抱怨，但使用==是可以的。我只想能够确定提供的颜色是深还是浅，这样我就可以应用正确的文本颜色。
似乎应该有选项来确定黑暗或光明在这里：https://sass-lang.com/documentation/modules/color#grayscale
欢迎其他解决办法。

css

来源：https://stackoverflow.com/questions/70411152/sass-detect-colour-darkness-to-determine-styles

2条答案

按热度按时间

rjjhvcjd1#

根据文档，whiteness和blackness与HWB color model相关。如果您可以使用HSL模型，则lightness可按如下方式使用：

$white: #fff;
$text: #393939;
$font-std: 18px;
$transition-std: 0.4s ease all;
$primary: #f8e421;
$secondary: #354052;

@function contrastText($color) {
    $result: invert($color);
    $lightness: lightness($result);
    @if ($lightness < 50) {
        $result: black;
    }
    @return $result;
}

@mixin buttonStyles($color) {
    font-size: $font-std;
    padding: 1rem 3rem;
    background-color: $color;
    color: contrastText($color);
    transition: $transition-std;

    &:hover {
        cursor: pointer;
        background-color: lighten($color, 15%);
    }
    &:focus {
        background-color: lighten($color, 10%);
    }
    &:active {
        background-color: lighten($color, 25%);
    }
}
.btnPrimary {
    @include buttonStyles($primary);
}
.btnSecondary {
    @include buttonStyles($secondary);
   
}
.btnTest {
    @include buttonStyles(#888);
}

编译后，它看起来像这样：jsfiddle
x一个一个一个一个x一个一个二个x
我不明白为什么HWB whiteness和blackness不能与HSL lightness这样的数字进行比较，但有可能不使用这些函数也能得到它们，因为公式很简单：

您可以使用红色（$color）和minmax函数。
单独使用whitness、blackness和lightness对于某些颜色是不够的。我认为您需要的是相对亮度，以获得最强的对比度。白色的亮度为1，黑色的亮度为0。黑灰对比度比白灰对比度高。要了解更多信息，请了解此网站是如何计算对比度的。

可选参数您可以通过定义参数的默认值使参数可选。在我们的示例中，任何非颜色值都可以：

@function contrastText($color, $text:-1) {
    $result: invert($color);
    $lightness: lightness($result);
    @if ($lightness < 47) {
        $result: black;
    }
    @if ($lightness > 46) {
        $result: white;
    }
    @if (type_of($text) == 'color') {
        $result: $text;
    }
    @return $result;
}

@mixin buttonStyles($color) {
    color: contrastText($color);
   /*color: contrastText($color,);*/
   /*color: contrastText($color, red);*/
}

赞(0）回复(0）举报 2022-12-15

flmtquvp2#

我添加了另一个解决方案。要查看它的运行：https://jsfiddle.net/gu2r4jqk/7/

function theFunction(){
    console.log("woho");
}

$--color: #0084ff;
$--black: black;
$--white: white;
$--background-active: ligther($--color, 30%);

body {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 100vh;
  justify-content: center;
  margin: 0;
}

@mixin backgroundLigthen($--color, $--percentage) {
  background-color: lighten($--color, $--percentage);
  $--background: lighten($--color, $--percentage);
  @include adjust-text-color($--background);
}

@mixin backgroundDarken($--color, $--percentage) {
  background-color: darken($--color, $--percentage);
  $--background: darken($--color, $--percentage);
  @include adjust-text-color($--background);
}

@mixin adjust-text-color($--background) {
  @if (lightness($--background) < 50%) {
    color: $--white;
  } @else {
    color: $--black;
  }
}

.button1 {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  border-radius: 130px;
  cursor: pointer;
  font-weight: 500;
  font-size: 50px;
  font-family: "Lexend", sans-serif;
  user-select: none;
  background-color: $--color;
  transition: background-color 0.2s ease;
  @if (lightness($--color) > 50%) {
    color: $--white;
  }

  &.selected {
    @include backgroundDarken($--color, 5%);
  }

  &:hover {
    @include backgroundDarken($--color, 10%);
  }

  &:active {
    @include backgroundLigthen($--color, 30%);
  }
}

.text {
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Perfect Button</title>
  <link rel="stylesheet" href="index.css" />

  <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap"
    rel="stylesheet" />
</head>

<body>
  <div class="button1" onclick="theFunction()">
    <div class="text">Click Me</div>
  </div>

  <div class="button1 selected" onclick="theFunction()">
    <div class="text">Click Me</div>
  </div>

  <script src="index.js"></script>
</body>

</html>

赞(0）回复(0）举报 2022-12-15

我来回答

css SASS检测颜色暗度以确定风格

2条答案

相关问题

热门标签

最新问答