时间戳

首页 > 解决方案 > 用 Sass 颜色函数计算三元颜色？

sass - 用 Sass 颜色函数计算三元颜色？

问题描述

有没有办法使用 Sass 的内置sass:color模块从单一颜色计算出另外两种三色？

例如，如果我有#0070f3我的基线颜色，我想得到#f30071和#8200f3（使用Material 的颜色选择器工具找到）。

标签： sasscolors

解决方案

是的，您可以adjust-hue通过传递您的基色和以度为单位的旋转值。

三合会可以改变旋转，您的示例在（我猜）给出了第二种颜色60deg和第三种颜色。120deg

这里有一个例子。

HTML 代码：

<div class="block base"></div>
<div class="block base60"></div>
<div class="block base120"></div>

萨斯代码：

$base-color: #0070f3

.block
  height: 100px
  width: 100px

.base
  background-color: $base-color

.base60
  background-color: adjust-hue($base-color, 60deg)

.base120
  background-color: adjust-hue($base-color, 120deg)

推荐阅读