Question

我正在尝试将变量$ color作为不透明度的背景传递：

$buttons: (
    ("success", "#36B54A"),
    ("warning", "#CCC"),
);

.btn {
    display: inline-block;
    background: #FFF;
    border-radius:5px;
    min-width:180px;
    margin: 0;

    @each $button in $buttons {

        &.#{nth($button, 1)} {
            $color: #{nth($button, 2)};
            border: 1px solid $color;
            color: $color;
            background: transparentize($color, 0.8);

                &:hover {
                    background: $color;
                    color:  #FFF;
                }
        }
    }

    &.large {height: 50px;}
    &.fill  {width:100%;}
}

我的想法是：为什么透明化中的变量不会起作用？如果我像这样使用它，没问题。

$color: #666;

body{
    background: transparentize($color, .8);
}

我甚至尝试过像RGB一样切断我的按钮（可能完全没有意义）：

$buttons: (
    ("success", "54", "181", "74"),

// rest of code here
&.#{nth($button, 1)} {
        $colorR: #{nth($button, 2)};
        $colorG: #{nth($button, 3)};
        $colorB: #{nth($button, 4)};

background:rgba($colorR, $colorG, $colorB, .5);

当然是这样的：

background:rgba($color, .5);

我一直在尝试不同的方法，比如'from_hex和不同的mixins，但仍然得到“$ color：”＃36B54A“不是'transparentize'的颜色'”错误。

有人可以向我解释发生了什么事吗？

Answer 1

如果您看到transparentize的文档，则可以看到变量没有引号传递。

一个有效的选项是传递字符串的确切值，不用＃{} ，透明化处理它：

$buttons: ("success", #36B54A),("warning", #CCC);

.btn {
    display: inline-block;
    background: #FFF;
    border-radius:5px;
    min-width:180px;
    margin: 0;

    @each $button in $buttons {

        &.#{nth($button, 1)} {
            $color: nth($button, 2);
            border: 1px solid $color;
            color: $color;
            background: transparentize($color, 0.8);

                &:hover {
                    background: $color;
                    color:  #FFF;
                }
        }
    }

    &.large {height: 50px;}
    &.fill  {width:100%;}
}

希望它有所帮助。

问候。

为什么我不能在transparentntize中使用hex-color $ var（在@each循环中）

1 个答案: