SASS mixin с динамическим списком аргументов не работает только с одним аргументом

Question

Я написал следующий mixin для динамического создания двух классов, используемых для названия и субтитров. Я хотел иметь возможность добавлять массивы аргументов в классы. Но я работал только в том случае, если у меня есть несколько значений в массивах, а не только один. Я подозреваю, что его не рассматривают как массив.

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

Это работает, если вы это называете, как это в SASS и запустить mix.sass('homepage.scss'); для него с помощью глотка часов и Laravel эликсира.

@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)) 
) 

Но нет, если назвать как этот

@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)) 
) 

Затем я получаю следующее сообщение об ошибке:

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

Мой Google-фу заброшенный меня при попытке выяснить, что значит эта ошибка.

Мой вопрос: что я сделал неправильно здесь? Может быть, лучший способ сделать это?

К сожалению для длинных кодовых блоков ...

Answer 1

Это известная проблема/поведение в отношении отдельных списков элементов. Как упоминалось в этом GitHub thread, вы можете добавить дополнительную запятую в конце, чтобы сделать Sass рассматриваться как список. Этот метод работает от Sass v3.3.0 и далее. (Испытано на sassmeister.com с 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),) 
) 

Когда он отправляется без этого дополнительного запятой, похоже, компилятор Sass рассматривает его как $title-extra список с двумя значениями, где первый один является margin а второй - 50px 0 0 0. Поведение аналогично для списка $sub-extra. Это то, что происходит на sassmeister.com, когда я пытался выводить отдельные значения в цикле @each. Поскольку значение ^st значение $title-extra само по себе равно margin, компилятор не работает на линии ниже (в первой итерации цикла @each), потому что нет второго значения для выбора, используя nth.

/* $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));