Question

我正在尝试将元素/类与输入类型组合在一个mixin中我有两个列表一个用于类，一个用于下面的mixin所需的输入类型检查。但它给了我一个错误。

=input($elements... , $inputs...)
  @each $input in $inputs
    input[type="#{$input}"]
      @content

  @each $element in $elements
    #{$element}
      @content

+input((select,.sample-class),(text,button))
  text-align: center

关于mixin给我一个错误

Error: Invalid CSS after "($elements... ": expected ")", was ", $inputs...)"
    on line 1 of ../sass/2-modules/_form.sass
    from line 2 of ../sass/2-modules/_modules.sass
    from line 2 of ../sass/styles.sass

必需的输出

select{
  text-align: center
}
.sample-class{
  text-align: center
}
input[type="text"]{
  text-align: center
}
input[type="button"]{
  text-align: center
}

Answer 1

您只能将一个 varargs 作为mixin参数传递

更新的答案 由于作为 varargs 参数传递的每个列表可以包含任意数量的项目，因此获得所需结果的解决方案可能如下所示

=input($elements...)
  @each $list in $elements
    $i: index($elements, $list)
    @each $list_item in $list
      @if $i % 2 == 0
        input[type="#{$list_item}"]
          @content
      @else
        #{$list_item}
          @content

//both lists contain 4 items
+input((select,'.sample-class','.sample-1','.sample-1') , (text,button,tel,url,))
  text-align: right

生成以下CSS

select {
  text-align: right;
}

.sample-class {
  text-align: right;
}

.sample-1 {
  text-align: right;
}

.sample-1 {
  text-align: right;
}

input[type="text"] {
  text-align: right;
}

input[type="button"] {
  text-align: right;
}

input[type="tel"] {
  text-align: right;
}

input[type="url"] {
  text-align: right;
}

每个列表可以包含任意数量的项目，但至少有一个

//First list contains 1 item while second list contains 4 items
+input((select), (text, button, tel, url,))
  text-align: center

生成以下CSS

select {
  text-align: center;
}

input[type="text"] {
  text-align: center;
}

input[type="button"] {
  text-align: center;
}

input[type="tel"] {
  text-align: center;
}

input[type="url"] {
  text-align: center;
}

希望这有帮助

如何在Sass或SCSS中调用“多变量参数”

1 个答案: