Me gustaría tener una función mixin que devuelva una lista de los tipos de entrada HTML5. Me gustaría gestionar esto en un solo lugar y, a medida que surjan nuevos tipos, cambie la función, no todos los lugares en el código.

El problema parece ser que los mixins no fueron diseñados para devolver cadenas que pueden usarse fuera de las llaves en CSS. Aquí hay un ejemplo de mi mezcla (actualmente devolviendo errores) y cómo lo usaría:

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

En uso:

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

Los errores que recibo son comoerror sass/style.scss (Line 134 of sass/_functions.scss: Invalid CSS after "...@return #{input": expected "}", was "[type=text]:foc...")

He intentado formatear la salida con y sin el@return Directiva, y con diferentes formas que he visto para encerrar valores de cadena (entre comillas, comillas simples, entre llaves con el hash). ¿Alguien ha intentado hacer algo como esto antes?