less - validacion - validar input javascript

¿Hay una forma genérica de agregar prefijos de proveedores en MENOS?

Question

Actualmente tengo un archivo mixins.less , donde casi todos los mixins son básicamente los mismos:

.border-radius(@radius) {
-webkit-border-radius: @radius;
-khtml-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.box-shadow(@value) {
-webkit-box-shadow: @value;
-khtml-box-shadow: @value;
-moz-box-shadow: @value;
box-shadow: @value;
}

¿Hay una manera de crear algún tipo de mixin genérico, que podría llamar así:

.vendor(''border-radius'', ''3px'');
.vendor(''box-shadox'', ''10px 10px'');

¿Y cuál produciría el mismo resultado que arriba?

Answer 1

Darse cuenta:

La recomendación es dejar de confiar en esta técnica y considerar el uso de una herramienta de prefijo dedicada (por ejemplo, -prefix-free , -prefix-free etc.). Los prefijos de los proveedores de codificación a través de los mixins de preprocesador CSS (Less, SCSS o lo que sea) son un anti-patrón puro en estos días y se consideran dañinos. Las herramientas de auto prefijo harán que su código sea limpio, legible, esté preparado para el futuro y sea fácil de mantener / personalizar.

Ver por ejemplo: less-plugin-autoprefix

Respuesta original:

Bueno, actualmente LESS no admite la "interpolación de nombre de propiedad", por lo que no puede usar una variable en los nombres de propiedad. Sin embargo, hay un truco: cómo pasar el nombre de una propiedad como un argumento a un mixin en menos Entonces, si no te importan las propiedades "ficticias" en el CSS de salida, aquí vamos:

.property_(@property, @value) {
_: ~"; @{property}:" @value;
}
.vendor(@property, @value) {
.property_(''-webkit-@{property}'', @value);
.property_( ''-khtml-@{property}'', @value);
.property_( ''-moz-@{property}'', @value);
.property_( @property, @value);
}
#usage {
.vendor(border-radius, 3px);
.vendor(box-shadow, 10px 10px);
}

Salida:

#usage {
_: ; -webkit-border-radius: 3px;
_: ; -khtml-border-radius: 3px;
_: ; -moz-border-radius: 3px;
_: ; border-radius: 3px;
_: ; -webkit-box-shadow: 10px 10px;
_: ; -khtml-box-shadow: 10px 10px;
_: ; -moz-box-shadow: 10px 10px;
_: ; box-shadow: 10px 10px;
}

Actualizar:

Menos v1.6.0 introdujo la característica de interpolación de propiedades , por lo que ahora ya no necesita hacks:

.vendor(@property, @value) {
-webkit-@{property}: @value;
-khtml-@{property}: @value;
-moz-@{property}: @value;
@{property}: @value;
}
#usage {
.vendor(border-radius, 3px);
.vendor(box-shadow, 10px 10px);
}