Ich hätte gerne eine Mixin-Funktion, die eine Liste der HTML5-Eingabetypen zurückgibt. Ich möchte dies an einer Stelle erledigen, und wenn neue Typen auftauchen, ändern Sie die Funktion, nicht alle Stellen an anderer Stelle im Code.

Das Problem scheint zu sein, dass Mixins nicht dafür entwickelt wurden, Zeichenfolgen zurückzugeben, die außerhalb der geschweiften Klammern in CSS verwendet werden können. Hier ist ein Beispiel für mein Mixin (derzeit werden Fehler zurückgegeben) und wie ich es verwenden würde:

/* 
 * 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]};
    }
}

In Benutzung:

@include input_text_types() {
    width: 80%; 
}

Die Fehler, die ich bekomme, sind wieerror sass/style.scss (Line 134 of sass/_functions.scss: Invalid CSS after "...@return #{input": expected "}", was "[type=text]:foc...")

Ich habe versucht, die Ausgabe mit und ohne dem zu formatieren@return Direktive, und mit verschiedenen Möglichkeiten habe ich gesehen, um Zeichenfolgenwerte (in Anführungszeichen, in einfachen Anführungszeichen, in geschweiften Klammern mit dem Hash) einzuschließen. Hat jemand schon einmal versucht, so etwas zu tun?