探索用于颜色操作的 Sass Tint 和 Shade 函数-css教程-PHP中文网

探索用于颜色操作的 Sass Tint 和 Shade 函数

碧海醫心

发布： 2024-11-17 08:00:26

转载

1115人浏览过

探索用于颜色操作的 sass tint 和 shade 函数

在网页设计和开发中，颜色在创建具有视觉吸引力和易于访问的界面方面发挥着至关重要的作用。 sass 是一款功能强大的 css 预处理器，可通过色调和阴影等自定义功能轻松进行颜色操作。这些功能允许开发人员动态调整颜色，从而增加设计系统的一致性和灵活性。

在这篇博文中，我们将深入探讨色调和阴影函数的工作原理、它们如何在 sass 中实现，以及为什么它们对于现代 web 开发至关重要。

什么是设计中的色调和阴影？

色调：色调是通过将颜色与白色混合而产生的，使其更浅。
阴影：阴影是通过将颜色与黑色混合，使其变暗而创建的。

色调和阴影通过提供基色的变化来帮助创建一个有凝聚力的调色板，非常适合主题、悬停效果和 ui 组件。

在 sass 中实现色调和阴影

下面是简单而有效的 sass 函数来创建色调和阴影：
色调功能
色调功能通过将颜色与白色混合来淡化颜色。

@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

登录后复制

说明：

纳米搜索

纳米搜索：360推出的新一代AI搜索引擎

查看详情

mix(white, $color, $percentage) 根据 $percentage 值将给定的 $color 与白色混合。
$百分比越高，颜色越浅。

遮阳功能
阴影功能通过将颜色与黑色混合来使其变暗。

@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

登录后复制

说明：

mix(black, $color, $percentage) 根据 $percentage 值将给定的 $color 与黑色混合。
$百分比越高，颜色越深。

实际例子

让我们创建一个基础调色板并使用色调和阴影函数来生成变化。

sass 代码：

$primary-color: #3498db;

.light-tint: tint($primary-color, 20%);
.darker-shade: shade($primary-color, 40%);

button {
  background-color: $primary-color;
  &:hover {
    background-color: tint($primary-color, 10%);
  }
  &:active {
    background-color: shade($primary-color, 10%);
  }
}

登录后复制

输出css：

.light-tint {
  background-color: #69b7ef;
}
.darker-shade {
  background-color: #216387;
}

button {
  background-color: #3498db;
}
button:hover {
  background-color: #4aa3e1;
}
button:active {
  background-color: #297bb1;
}

登录后复制