SASS Mixin mit dynamischer Argumentliste funktioniert nicht mit nur einem Argument

Question

Ich habe das folgende Mixin geschrieben, um dynamisch zwei Klassen für einen Titel und Untertitel zu erstellen. Ich wollte in der Lage sein, den Klassen Arrays von Argumenten hinzuzufügen. Aber ich habe es nur funktioniert, wenn ich mehrere Werte in den Arrays habe, nicht mit nur einem. Ich vermute, dass es nicht als Array behandelt wird.

@mixin argument ($key, $value) { 
    #{$key}: $value; 
} 

// dynamic mixin that creates two seperate classes for a header title and subtitle 
@mixin header-titles($name, $title-size, $title-color, $sub-size, $sub-color, $title-extra: false, $sub-extra: false) { 

    .#{$name}-title { 
     @include font($bold-font, 900, $title-size, $title-color) 
     @if $title-extra { 
      @each $t-extra in $title-extra{ 
       @include argument(nth($t-extra,1),nth($t-extra,2)); 
      } 
     } 
    } 

    .#{$name}-subtitle { 
     @include font($bold-font, 900, $sub-size, $sub-color) 
     @if $sub-extra { 
      @each $s-extra in $sub-extra { 
       @include argument(nth($s-extra,1),nth($s-extra,2)); 
      } 
     } 
    } 
} 

Es funktioniert, wenn Sie es so in SASS nennen und mix.sass('homepage.scss'); für sie mit großen Schluck Uhr und Laravel Elixier laufen.

@include header-titles(
    'fubar', 
    $fubar-title-font-size, 
    $fubar-title-text-color, 
    $fubar-sub-title-font-size, 
    $fubar-sub-title-text-color, 
    ((margin, 50px 0 0 0),(padding, 50px 0 0 0)),((margin, 50px 0 0 0),(padding, 50px 0 0 0)) 
) 

Aber nicht, wenn wie diese dann

@include header-titles(
    'fubar', 
    $fubar-title-font-size, 
    $fubar-title-text-color, 
    $fubar-sub-title-font-size, 
    $fubar-sub-title-text-color, 
    ((margin, 50px 0 0 0)),((margin, 50px 0 0 0)) 
) 

genannt bekomme ich folgende Fehlermeldung:

Error: index out of bounds for `nth($list, $n)` 
     on line 86 of resources/assets/sass/_mixins.scss 
>>   @include argument(nth($t-extra,1),nth($t-extra,2)); 
    ------------------------------------------^ 

    at options.error ({obfuscated projectdirname}\node_modules\node-sass\lib\index.js:286:26) 
    status: 1, 
    file: '{obfuscated projectdirname}/resources/assets/sass/_mixins.scss', 
    line: 86, 
    column: 51, 
    message: 'resources\\assets\\sass\\_mixins.scss\nError: index out of bounds for `nth($list, $n)`\n  on line 86 of resources/assets/sass/_mixins.scss\n>>   @include argument(nth($t-extra,1),nth($t-extra,2));\n ------------------------------------------^\n', 
    formatted: 'Error: index out of bounds for `nth($list, $n)`\n  on line 86 of resources/assets/sass/_mixins.scss\n>>   @include argument(nth($t-extra,1),nth($t-extra,2));\n ------------------------------------------^\n', 
    messageFormatted: 'resources\\assets\\sass\\_mixins.scss\nError: index out of bounds for `nth($list, $n)`\n  on line 86 of resources/assets/sass/_mixins.scss\n>>   @include argument(nth($t-extra,1),nth($t-extra,2));\n ------------------------------------------^\n', 
    messageOriginal: 'index out of bounds for `nth($list, $n)`', 
    relativePath: 'resources\\assets\\sass\\_mixins.scss', 
    name: 'Error', 
    stack: 'Error: resources\\assets\\sass\\_mixins.scss\nError: index out of bounds for `nth($list, $n)`\n  on line 86 of resources/assets/sass/_mixins.scss\n>>   @include argument(nth($t-extra,1),nth($t-extra,2));\n ------------------------------------------^\n\n at options.error ({obfuscated projectdirname}\\exroot\\node_modules\\node-sass\\lib\\index.js:286:26)', 
    showStack: false, 
    showProperties: true, 
    plugin: 'gulp-sass' } 
{ Error: resources\assets\sass\_mixins.scss 
Error: index out of bounds for `nth($list, $n)` 
     on line 86 of resources/assets/sass/_mixins.scss 
>>   @include argument(nth($t-extra,1),nth($t-extra,2)); 
    ------------------------------------------^ 

    at options.error ({obfuscated projectdirname}\node_modules\node-sass\lib\index.js:286:26) 
    status: 1, 
    file: '{obfuscated projectdirname}/resources/assets/sass/_mixins.scss', 
    line: 86, 
    column: 51, 
    message: 'resources\\assets\\sass\\_mixins.scss\nError: index out of bounds for `nth($list, $n)`\n  on line 86 of resources/assets/sass/_mixins.scss\n>>   @include argument(nth($t-extra,1),nth($t-extra,2));\n ------------------------------------------^\n', 
    formatted: 'Error: index out of bounds for `nth($list, $n)`\n  on line 86 of resources/assets/sass/_mixins.scss\n>>   @include argument(nth($t-extra,1),nth($t-extra,2));\n ------------------------------------------^\n', 
    messageFormatted: 'resources\\assets\\sass\\_mixins.scss\nError: index out of bounds for `nth($list, $n)`\n  on line 86 of resources/assets/sass/_mixins.scss\n>>   @include argument(nth($t-extra,1),nth($t-extra,2));\n ------------------------------------------^\n', 
    messageOriginal: 'index out of bounds for `nth($list, $n)`', 
    relativePath: 'resources\\assets\\sass\\_mixins.scss', 
    name: 'Error', 
    stack: 'Error: resources\\assets\\sass\\_mixins.scss\nError: index out of bounds for `nth($list, $n)`\n  on line 86 of resources/assets/sass/_mixins.scss\n>>   @include argument(nth($t-extra,1),nth($t-extra,2));\n ------------------------------------------^\n\n at options.error ({obfuscated projectdirname}\\node_modules\\node-sass\\lib\\index.js:286:26)', 
    showStack: false, 
    showProperties: true, 
    plugin: 'gulp-sass' } 

Mein Google-Fu mich verlassen, wenn sie versuchen, herauszufinden, was dieser Fehler bedeutet.

Meine Frage: was habe ich hier falsch gemacht? Gibt es vielleicht einen besseren Weg, dies zu tun?

Sorry für den langen Code-Blöcke ...

Answer 1

Es ist ein bekanntes Problem/Verhalten in Bezug auf einzelne Elementlisten. Wie in dieser GitHub thread erwähnt, können Sie am Ende ein zusätzliches Komma hinzufügen, damit Sass es als Liste behandelt. Diese Methode funktioniert ab Sass v3.3.0. (Getestet bei sassmeister.com mit v3.4.21.)

@include header-titles(
    'fubar', 
    $fubar-title-font-size, 
    $fubar-title-text-color, 
    $fubar-sub-title-font-size, 
    $fubar-sub-title-text-color, 
    ((margin, 50px 0 0 0),),((margin, 50px 0 0 0),) 
) 

Wenn es ohne dass zusätzliche Komma gesendet wird, scheint es, wie der Compiler Sass als $title-extra behandelt ist eine Liste mit zwei Werten, bei denen die erste ist margin und der zweite ist 50px 0 0 0. Das Verhalten ist für die $sub-extra Liste auch ähnlich. Dies geschieht bei sassmeister.com, als ich versuchte, die einzelnen Werte innerhalb der @each-Schleife auszugeben. Da der Wert $title-extra selbst nur margin ist, fällt der Compiler in der unteren Zeile (innerhalb der ersten Iteration der Schleife @each) aus, weil unter Verwendung der nth kein zweiter Wert ausgewählt werden muss.

/* $t-extra in 1st iteration is only margin and so nth($t-extra,2) reports error */ 
@include argument(nth($t-extra,1),nth($t-extra,2));