如何使用 hsl 而不是 rgb 进行 scss 全局声明 javascript api

Posted 2023-03-06

【中文标题】如何使用 hsl 而不是 rgb 进行 scss 全局声明 javascript api

【英文标题】：how can use hsl instead of rgb for scss global declaration javascript api

【发布时间】：2021-04-12 00:34:12

【问题描述】：

这就是我的 next.config.js 的样子

// next.config.js

const env = require('./site.config').env;
const Colour = require('sass').types.Color;
const r, g, b = require('./site.config').customProperties;

const withBundleAnalyzer = require('@next/bundle-analyzer')(enabled: !!process.env.ANALYZE);

const config = 
  env: 
    ...env,
  ,
  sassOptions: 
    functions: 
      'primaryOpacityColour()': function()
        return new Colour(r, g,b)
        // here I want to return Colour in hsl form
      ,
    ,
  ,
;

module.exports = withBundleAnalyzer(config);

我无法以 hsl 形式返回颜色，谁能帮我解决这个问题？

【问题讨论】：

您能否说明您是否需要帮助将 rgb 转换为 hsl，或者是否需要帮助以返回 sass 将在 hsl 而不是 rgb 中呈现的内容？

【参考方案1】：

根据https://github.com/sass/sass/issues/2988，您无法使用 javascript api 执行此操作。 dart-sass 在 dart api 中有它，但在 javascript api 中没有（还没有）。

您最好的选择是从 hsl 转换为 rgb 并返回 Colour，就像您现在所做的那样。