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

标签 javascript reactjs sass next.js globalization

这就是我的 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 形式返回颜色,谁能帮我解决这个问题?

最佳答案

根据 https://github.com/sass/sass/issues/2988你不能用 javascript api 做到这一点。 dart-sass 在 dart api 中有它,但在 javascript api 中没有(还没有)。
您最好的选择是从 hsl 转换为 rgb 并返回 Colour,就像您现在所做的那样。

关于javascript - 如何使用 hsl 而不是 rgb 进行 scss 全局声明 javascript api,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65592793/

相关文章:

javascript - 日期时间选择器上的更改功能无法正常工作

javascript - 当图像位于中间且有 3 列幻灯片放映时删除标签

javascript - 为什么 csrf token 通常存储在隐藏的表单字段中?

javascript - 无法访问 ComponentDidMount 上的引用

SASS 和数据属性选择和嵌套

css - SCSS 和 Sass 有什么区别?

Javascript - 理解 Object.create 和 Object.call(this)

javascript - Netsuite Suitelet SSv1 将多选值更改为数组

javascript - 用于 Firefox 的带有 unicode 符号的复选框

css - 使用最小和最大宽度在 sass 中设置断点