Share
Usted sabe el ejercicio bastante bien. ¿Quieres dar alguna sección de tu sitio web con esquinas redondeadas con CSS3? Entonces no necesitará nada menos que tres prefijos de proveedor: webkit, moz y el formulario recomendado por W3C. ¿No es una gran pérdida de tiempo, sin mencionar el espacio en la pantalla? ¿Qué pasaría si, en cambio, pudiéramos usar un clase ¿expediente? Bueno, podemos! Te mostraré cómo hoy.
Si usamos una herramienta como LESS o SASS, podemos crear nuestra propia herramienta. clase archivos con bastante facilidad. ¿No tienes idea de lo que estoy hablando? Bueno, primero, revisa este consejo rápido. Te enseñará exactamente cómo ponerte en marcha con menos.
A continuación, debemos crear un archivo de clases principales que se utilizará en cada proyecto. Siéntase libre de almacenar este archivo en cualquier lugar que desee, sin embargo, en el video de arriba, uso nuestra popular (y exclusiva) aplicación Structurer.
Haremos el primero juntos, pero asegúrese de revisar el screencast para más detalles.
.border-radius (@radius: 3px) -webkit-border-radius: @radius; -moz-border-radius: @radius; radio del borde: @radius;
En cuanto a las convenciones de nomenclatura, he descubierto que es más inteligente usar el nombre oficialmente recomendado para el nombre de su clase; en este caso, "radio del borde."Para declarar las variables con Less, las introducimos con una @ símbolo. En este caso, estamos configurando un valor predeterminado de 3px, Sin embargo, si necesitamos anular ese valor en nuestro proyecto, es muy fácil!
#someElement .border-radius (10px);
En este punto, simplemente enjuague y repita para cada propiedad que requiera múltiples prefijos de proveedores. Aquí hay un puñado para empezar:
.box-shadow (@x: 2px, @y: 2px, @blur: 5px, @spread: 0, @color: rgba (0,0,0, 6)) -webkit-box-shadow: @x @ y @blur @spread @color; -moz-box-shadow: @x @y @blur @spread @color; box-shadow: @x @y @blur @spread @color;
.transición (@what: all, @length: 1s, @easing: ease-in-out) -webkit-transition: @what @length @easing; -moz-transition: @what @length @easing; -o-transición: @what @length @easing; transición: @what @length @easing;
.box (@orient: horizontal, @pack: center, @align: center) display: -webkit-box; pantalla: -moczona; caja de presentación; -webkit-box-orient: @orient; -moz-box-orient: @orient; caja-orientación: @orient; -webkit-box-pack: @pack; -moz-box-pack: @pack; caja-paquete: @pack; -webkit-box-align: @align; -moz-box-align: @align; box-align: @align;
.flex (@val: 1) -webkit-box-flex: @val; -moz-box-flex: @val; box-flex: @val;
Me encantaría escuchar sus pensamientos sobre esto. Si te gusta la idea, vamos a cargar esta hoja de estilos..
Accentsconagua