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中这样称呼它并使用gulp watch和laravel elixir为它运行mix.sass('homepage.scss');，它就会起作用。

@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

关于单个元素列表的 已知问题/行为 。如此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，第二个是{{1 }}。 50px 0 0 0列表的行为也类似。当我尝试在$sub-extra循环中输出单个值时，这就发生在sassmeister.com上。由于@each本身的1 ^st值仅为$title-extra，因此编译器在下面的行中失败（在margin循环的第一次迭代内），因为有没有使用@each选择的第二个值。

nth

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

1 个答案: