[英]SCSS - Extend class dynamically
In Vue i have similar to在 Vue 我有类似的
:style="{
[`--chip-bg-hover`]: hoverColorValue,
[`--chip-bg-active`]: activeColor,
[`--chip-border-hover`]: borderHoverColorValue,
}"
Then in SCSS然后在 SCSS
.chip:hover {
box-shadow: 0 10px 20px 0 #00000026;
@extend --chip-bg-active;
}
The problem is obvius.问题很明显。 Can´t extend from to --chip-bg-active variable.
不能从 --chip-bg-active 变量扩展。 Is a string also, but doesn't work right.
也是一个字符串,但不能正常工作。 So, anybody know the right way to extend a class dynamically?
那么,有人知道动态扩展 class 的正确方法吗?
@extend
is used to extend selectors to share the declarations, but --chip-bg-active
is a CSS variable and is a value . @extend
用于扩展选择器以共享声明,但--chip-bg-active
是 CSS 变量并且是value 。 Think of it like trying to do @extend #000
– this does not make sense.把它想象成尝试做
@extend #000
这没有意义。 If you are trying to use the value of --chip-bg-active
, you can use var()
like this to get the value of the CSS variable:如果您尝试使用
--chip-bg-active
的值,您可以像这样使用var()
来获取 CSS 变量的值:
.chip:hover {
box-shadow: 0 10px 20px 0 #00000026;
background-color: var(--chip-bg-active);
}
Maybe can do something like this.也许可以做这样的事情。
.chip:hover {
box-shadow: 0 10px 20px 0 #00000026;
$background-color: var(--chip-bg-hover);
$border-color: var(--chip-border-hover);
@if $background-color == 'defaultMarker-hover' {
@extend .bg-defaultMarker-hover;
} @else if $background-color == 'color1Marker-hover' {
@extend .bg-color1Marker-hover;
} @else if $background-color == 'color2Marker-hover' {
@extend .bg-color2Marker-hover;
} @else if $background-color == 'color3Marker-hover' {
@extend .bg-color3Marker-hover;
} @else if $background-color == 'color5Marker-hover' {
@extend .bg-color5Marker-hover;
} @else if $background-color == 'color4Marker-hover' {
@extend .bg-color4Marker-hover;
} @else if $background-color == 'color6Marker-hover' {
@extend .bg-color5Marker-hover;
} @else if $background-color == 'color7Marker-hover' {
@extend .bg-color6Marker-hover;
} @else if $background-color == 'color8Marker-hover' {
@extend .bg-color7Marker-hover;
} @else if $background-color == 'color9Marker-hover' {
@extend .bg-color8Marker-hover;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.