英文:
CSS color-mix result
问题
如何获取color-mix两种颜色的结果值？
对于不支持color-mix功能的浏览器，我需要使用硬编码的值。
英文:
How can I get the value of the result of color-mix two colors?
I need to use a hard-coded value for browsers that do not support the color-mix feature.
答案1
得分: 1
我不知道有一个直接对应CSS color-mix函数并在编译时执行的SASS函数，尽管存在其他用于颜色操作的函数。您可以查看其他能够将现代CSS转译为与较旧浏览器兼容的语法的CSS预处理工具，但我自己不知道有这样的工具（并且交换工具推荐超出了本站的范围）。
否则，如果您只需对几种颜色进行操作，您可以在浏览器控制台中使用JavaScript运行 getComputedStyle(element).backgroundColor，这应该会返回分配给给定元素的颜色。这可能会以与color-mix CSS函数传递的格式返回颜色。
document.write(getComputedStyle(document.body).backgroundColor);
body {
background: color-mix(in lch, red, blue);
}
英文:
I'm not aware of a SASS function that directly corresponds to the CSS color-mix function but is performed at compile-time, though other functions exist for color manipulation. You could look into other CSS preprocessor tools that can transpile modern CSS into a syntax compatible with older browsers, but I don't know one myself (and exchanging tool recommendations is beyond the scope of this site).
Otherwise, if you just need to do it for a few colors you can use JavaScript in your browser console to run getComputedStyle(element).backgroundColor which should return the color assigned to the given element. This will likely return the color in the format passed to the color-mix CSS function.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
document.write(getComputedStyle(document.body).backgroundColor);
<!-- language: lang-css -->
body {
background: color-mix(in lch, red, blue);
}
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论