实时引用sass/scss变量

我正在尝试使用mixin来实现以下功能。实时引用sass/scss变量

我有一个社交按钮列表。除背景色和悬停状态外，它们每个都共享相同的样式。

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

我莫名其妙缺乏合适的条款适当的谷歌搜索。我会很高兴向正确的方向推进。

感谢您的帮助。

来源

2017-10-16 Willi

可以使用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的建议。

来源

2017-10-17 08:37:30

在OP的问题中，他在mixin中包含类名，使用'$ network'作为类参考。这很容易在你的例子中完成，只需在'。{{network} {// content}'中包装mixin内容，然后就可以在CSS中删除'.facebook {}'和'.twitter {}'只需使用'@include btn-social（facebook）;'。 –

@TomOakley感谢您的建议，我已经更新了答案 –

请尝试以下方法：

@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社科院插值。

来源

2017-10-16 16:39:21 jfeferman

实时引用sass/scss变量

回答

相关问题