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

Question

这就是我的 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);

我无法return hsl 格式的颜色，谁能帮我解决这个问题？

Answer 1

根据 https://github.com/sass/sass/issues/2988，您不能使用 javascript api 执行此操作。 dart-sass 在飞镖 api 中有它，但在 javascript api 中没有。

你最好的选择是从 hsl 转换为 rgb 和 return 颜色，就像你现在所做的那样。

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

how can use hsl instead of rgb for scss global declaration javascript api

javascript

globalization

sass

reactjs

next.js