Question

I'm trying to use a variable that gets pass into a mixin to display font settings.

Some variables will display 5 items ($w,$s,$lh,$f,$t) and some will display 3, which is why I'm trying to avoid using nth(selectors) to save me from doing multiple @if @else checks inside my 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;
    }

But the output I'm getting is this:

    .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;
    }

Is what I'm trying to do possible?

Thanks in advance, Adam

EDIT *****

    $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; }
    }
Was it helpful?

Solution

Use collecions. Try this for fonts variables:

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

Edited(@Adam O'Brien comment)

Working mixin is:

@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; 
    } 

}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top