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'); 中使用 gulp watch 和 laravel elixir 这样调用它，它就会起作用。

@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-fu 在试图找出这个错误的含义时抛弃了我。

我的问题：我在这里做错了什么？有没有更好的方法来做到这一点？

抱歉代码块太长...

Answer 1

关于单个元素列表，它是已知的problem/behavior。如本 GitHub thread you can add an extra comma at the end to make Sass treat it as a list. This method works from Sass v3.3.0 onwards. (Tested at 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 列表的行为也类似。这就是当我试图在 @each 循环中输出单个值时在 sassmeister.com 处发生的情况。由于 $title-extra 的第 1^st 值本身只是 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));

SASS 带有动态参数列表的 mixin 不适用于只有一个参数

SASS mixin with dynamic argument list does not work with only one argument

css

sass

webpack

gulp-watch

laravel-elixir