[英]Sass - import variables to be used in mixin
有沒有辦法將外部變量導入mixins?
我想從一個mixin參數生成一個變量名
然后從外部來源調用它。 這有意義嗎?
/* Striped status bar variables ******************************************/
$greyFirstGradientStartColor: #999999;
$greyFirstGradientEndColor: #d3cfcf;
$greySecondGradientStartColor: #ababab;
$greySecondGradientEndColor: #595959;
@import variables.scss
[...]
@mixin gradient-repeating($color, $deg, $firstWidth, $space, $secondWidth){
background-image:
repeating-linear-gradient(
$deg,
$(#{$color}FirstGradientStartColor),
$(#{$color}FirstGradientEndColor) $firstWidth+px,
$(#{$color}SecondGradientStartColor) ($firstWidth+$space)+px,
$(#{$color}SecondGradientStartColor) $secondWidth+px
);
}
@import variables.scss;
@import mixins.scss;
[...]
@include gradient-repeating(grey, -45, 20, 0, 20);
否。變量變量在Sass中不存在。 通常使用列表或列表列表。
您的mixin可以這樣寫:
$grey-gradient: #999999 #d3cfcf, #ababab #595959;
@mixin gradient-repeating($color, $deg, $firstWidth, $space, $secondWidth){
$firstColor: nth($color, 1);
$secondColor: nth($color, 2);
background-image:
repeating-linear-gradient(
$deg,
nth($firstColor, 1),
nth($firstColor, 2) $firstWidth+px,
nth($secondColor, 1) ($firstWidth+$space)+px,
nth($secondColor, 1) $secondWidth+px
);
}
.foo {
@include gradient-repeating($grey-gradient, -45, 20, 0, 20);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.