动态引用sass / scss变量

Question

我正在尝试完成混合以实现以下目的。

我有一个社交按钮列表。 它们各自具有相同的样式，除了background-color和：hover状态。

我当前的SASS方法。 （将返回无效的CSS错误）

@mixin btn-social($network) {
    .#{$network} {
        background: $#{$network}; // trying to reference a global variable

            &:hover, &:focus {
                background: darken($#{$network}, $darken-modifier); 
            }
    }
}

要这样渲染：

.facebook {
    background: blue; // stored in $facebook
}
.facebook:hover, .facebook:focus {
    background: darkblue; //darkend value above
}

我以某种方式缺少正确的Google搜索的正确术语。 我希望朝正确的方向前进。

谢谢您的帮助。

Answer 1

您可以使用sass映射来存储颜色变量，然后使用传递给mixin的名称（如jsfiddle）找到正确的颜色：

 $colors: ( facebook: blue, twitter: red ); $darken-modifier: 100%; @mixin btn-social($network) { .#{$network} { background: map-get($colors, $network); &:hover, &:focus { background: darken(map-get($colors, $network), $darken-modifier); } } } @include btn-social(facebook); @include btn-social(twitter); 

 <a class="facebook"> facebook </a> <a class="twitter"> twitter </a> 

编辑：更新为在下面包含@TomOakley的建议。

Answer 2

请尝试以下操作：

@mixin btn-social($network, $color, $darkColor) {
    #{$network}  {
        background: $color; 

            &:hover, &:focus {
                background: $darkColor;
            }
    }
}

.foo {
  @include btn-social('.facebook', blue, darkblue)
}

编译为：

.foo .facebook {
  background: blue;
}
.foo .facebook:hover, .foo .facebook:focus {
  background: darkblue;
}

查阅此参考进行SASS插值。