英文:
Using the SASS rgba function in a CSS variable context?
问题
如何使SASS的rgba函数在CSS变量声明的值部分将rgba(#4caf50, 0.1)转换为rgba(76, 175, 80, 0.1)？
为了更清晰，这里有一个示例：
$green: #4caf50;
$green-rgba: rgba($green, 0.1);
@debug $green-rgba; // rgba(76, 175, 80, 0.1)
@debug语句将记录rgba(76, 175, 80, 0.1)，这是正确的。
然而，如果我们尝试以下操作：
test {
--mat-mdc-button-ripple-color: rgba(#4caf50, 0.1);
}
编译后的结果是：
test {
--mat-mdc-button-ripple-color: rgba(#4caf50, 0.1);
}
您有什么想法？
英文:
How do we get SASS rgba to turn rgba(#4caf50, 0.1) into rgba(76, 175, 80, 0.1) when the context is the value side of the CSS variable declaration?
For my clarity here's an example:
$green: #4caf50;
$green-rgba: rgba($green, 0.1);
@debug $green-rgba; // rgba(76, 175, 80, 0.1)
The @debug statement will log rgba(76, 175, 80, 0.1), which is correct.
However if we try this:
test {
--mat-mdc-button-ripple-color: rgba(#4caf50, 0.1);
}
The compiled result is:
test {
--mat-mdc-button-ripple-color: rgba(#4caf50, 0.1);
}
Thoughts?
答案1
得分: 1
好的 - 在研究 Angular Material 按钮源代码后，涟漪效果的代码如下，并且它是有效的：
--mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
英文:
OK - After studying the source for the Angular Material button the ripple code does it like this and it works:
--mat-mdc-button-ripple-color: #{rgba($color, 0.1)};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论