Question

我正在尝试完成混音以实现以下目标。

我有一个社交按钮列表。它们各自共享相同的样式，除了背景颜色和：悬停状态。

我目前的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
}

我在某种程度上缺乏正确的谷歌搜索条款。我很欣赏向正确的方向发展。

感谢您的帮助。

Answer 1

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

＆＃13;

$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);

＆＃13;

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

＆＃13;

编辑：已更新，以包含@ 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;
}

查看 this reference 进行SASS插值。

即时引用sass / scss变量

2 个答案: