如何在Sass或SCSS中調用「多個變量參數」

我想在一個mixin中將輸入類型與元素/類組合在一起我在哪裏有兩個列表，一個是類，另一個是需要輸入類型檢查下面的mixin。但它給了我一個錯誤。如何在Sass或SCSS中調用「多個變量參數」

=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

關於混入給我一個錯誤

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 
}

來源

2016-12-14 PratapRockerss

你可以只通過一個可變參數作爲一個混合參數

修訂答 由於作爲傳遞的每個列表可變參數參數可以包含任意數量的項目，解決方法解決方案，讓您想要的結果看起來是這樣的

=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; 
}

希望這有助於

來源

2016-12-14 08:50:34

感謝您將它的努力。但它不會解決我的目的，例如，我在每個列表中只添加了2個，但它可能比這個更多或更少。例如。（（select，'sample-class'，'。sample-1'，'。sample-1'），（text，button，tel，url））或者它可以是第一個列表中的單個多個在第二個列表中例如。 +輸入（（選擇），（文本，按鈕，電話，網址） – PratapRockerss

你沒有提到你的問題。請參閱最新的答案。希望它能解決您的問題 –

嗨！！，真的很棒，非常感謝。 – PratapRockerss

如何在Sass或SCSS中調用「多個變量參數」

回答

相關問題