Question

我正在尝试使用一个传入mixin的变量来显示字体设置。

有些变量会显示5个项目（$ w，$ s，$ lh，$ f，$ t），有些会显示3，这就是为什么我试图避免使用第n个（选择器）来阻止我做多个@if @else检查我的mixin。

    /* theme_vars.scss */
    $theme__font: niceFont;
    $font__value_1: unquote("$w:normal, $s:1.25em, $lh:1.5em, $f:#{$theme__font}, $t:capitalize");
    $font__value_2: unquote("$w:bold, $s:2em, $f:#{$theme__font}");

    /* theme/header.scss */
    .logo {
        @include customFont($font__values_1);
    }
    .title {
        @include customFont($font__values_2);
    }

    /* mixins.scss */
    @mixin customFont( $w:inherit, $s:inherit, $lh:inherit, $f:inherit, $t:inherit ) {
        font-weight: $w;
        font-size: $s;
        line-height: $lh;
        font-family: $f;
        text-transform: $t;
    }

但我得到的输出是：

    .logo {
        font-weight: $w:normal, $s:1.25em, $lh:1.5em, $f:#{$theme__font}, $t:capitalize;
        font-size: inherit;
        line-height: inherit;
        font-family: inherit;
        text-transform: inherit;
    }

我正在尝试做什么？

提前谢谢，亚当

编辑 * ****

    $font__value_1: (normal, 1.25em, 1em, "#{$theme__font}", capitalize);

    .logo {
        @include customFont($font__value_1);
    }

    @mixin customFont( $list ) {
        $wt: nth($list, 1);
        $sz: nth($list, 2);
        $lh: nth($list, 3);
        $ff: nth($list, 4);
        $tt: nth($list, 5);

        @if $wt != null { font-weight: $wt; }
        @if $sz != null { font-size: $sz; }
        @if $lh != null { line-height: $lh; }
        @if $ff != null { font-family: $ff; }
        @if $tt != null { text-transform: $tt; }
    }

Answer 1

使用collecions。试试这个字体变量：

 $font__value_1: (normal, 1.25em, 1.5em, "#{$theme__font}", capitalize);
 $font__value_2: unquote(bold, 2em, null, "#{$theme__font}", null);

已编辑（@ Adam O'Brien评论）

工作mixin是：

@mixin customFont( $list ) { 
    $wt: nth($list, 1); 
    $sz: nth($list, 2); 
    $lh: nth($list, 3); 
    $ff: nth($list, 4); 
    $tt: nth($list, 5); 

    if $wt != null { 
        font-weight: $wt;
    } 

    if $sz != null {
        font-size: $sz;
    } 

    if $lh != null { 
        line-height: $lh; 
    } 

    if $ff != null {
        font-family: $ff; 
    } 

    if $tt != null {
        text-transform: $tt; 
    } 

}

SCSS变量字符串解析为单个mixin变量

编辑 * ****

1 个答案: