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