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