Stylizowanie określonego zestawu typów danych wejściowych w sposób wielokrotny z Sass
Chciałbym mieć funkcję mixin, która zwraca listę typów wejściowych HTML5. Chciałbym zarządzać tym w jednym miejscu, a gdy pojawią się nowe typy, zmień funkcję, a nie wszystkie miejsca w kodzie.
Problem polega na tym, że miksy nie były zaprojektowane do zwracania ciągów znaków, które mogą być używane poza nawiasami klamrowymi w CSS. Oto przykład mojego miksu (obecnie zwracającego błędy) i jak go używać:
/*
* Set all the up-and-coming input text types here for easier reference
* Does not include types that are not meant to be displayed full width, such as:
type=number, type=range, type=date, type=color
*/
@mixin input_text_types( $focus:false ) {
@if $focus {
@return #{input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, input[type=tel]:focus};
} @else {
@return #{input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel]};
}
}
W użyciu:
@include input_text_types() {
width: 80%;
}
Błędy, które dostaję, są jakerror sass/style.scss (Line 134 of sass/_functions.scss: Invalid CSS after "...@return #{input": expected "}", was "[type=text]:foc...")
Próbowałem sformatować wyjście za pomocą i bez@return
dyrektywy i na różne sposoby widziałem, aby ująć wartości łańcuchowe (w cudzysłowach, w pojedynczym cudzysłowie, w nawiasach klamrowych z hashem). Czy kiedykolwiek ktoś próbował coś takiego zrobić?