實時引用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變量

回答

相關問題