DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
13-09-2013

Muchas veces cuando trabajamos con las hojas de estilo tenemos que repetir reglas CSS por todo el documento:

header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
footer {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
section {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

Esto se convierte en un verdadero dolor de cabeza cuando la Hoja de Estilo crece o si decidimos cambiar algunas reglas CSS; ya que tuviéramos que revisar toda la Hoja de Estilo y realizar dicho cambio, como por ejemplo si decidiéramos ya no utilizar bordes redondeados o cambiarle las medidas a dicha propiedad.

Los Mixins de LESS CSS

Con los Mixins de LESS CSS podemos incrustar todas las propiedades de una clase en otra clase con sólo incluir el nombre de la clase como una de sus propiedades; funciona de forma muy parecida a las variables pero con clases enteras; si quisiéramos generar las reglas de arriba, podriamos hacer algo como esto:


.esquinas-redondeadas () {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

.clase-x () {
  background: #333;
  width:100%;
  margin:0;
  height: auto;
}

header {
  .esquinas-redondeadas;
  .clase-x
}
footer {
  .esquinas-redondeadas;
  .clase-x
}
section{
   .esquinas-redondeadas;
}

Esta es una de las propiedades más interesantes que nos brinda LESS CSS ya que permite heredar el contenido de estas clases a otras clases y así evita la repetición de reglas CSS y organizar la Hoja de Estilo.

Los Mixins de LESS CSS con pase de parámetros

Ahora bien para nuestro pequeño ejemplo, ¿Qué pasa si queremos que las medidas de los bordes del header sean distintas a las del footer?

Podemos hacer algo como esto:


.esquinas-redondeadas (@radio:5px) {
  -webkit-border-radius: @radio;
  -moz-border-radius: @radio;
  -ms-border-radius: @radio;
  -o-border-radius: @radio;
  border-radius: @radio;
}

.clase-x () {
  background: #333;
  width:100%;
  margin:0;
  height: auto;
}

header {
  .esquinas-redondeadas(10px);
  .clase-x
}
footer {
  .esquinas-redondeadas;
  .clase-x
}
section{
   .esquinas-redondeadas;
}

Al compilar el código LESS anterior obtendremos:

header {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
footer {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  background: #333;
  width: 100%;
  margin: 0;
  height: auto;
}
section {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

Como vimos en este último ejemplo, los Mixins en LESS CSS también pueden comportarse como funciones, y tomar argumentos lo que permite potenciar su funcionamiento.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Gradientes sobre el texto

Gradientes sobre el texto

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Como dibujar con canvas y ciclos -HTML5

Como dibujar con canvas y ciclos -HTML5

Algunos artículos que te pueden interesar

Las propiedades flex-grow, flex-shrink y flex-basis

Las propiedades flex-grow, flex-shrink y flex-basis

Los flex permiten adaptarse fácilmente al espacio disponible en cualquier dispositivo; se explicará el uso de las propiedades flex-grow, flex-shrink para manejar el espacio sobrante y faltante y flex-basis para definir el tamaño base.

Andrés Cruz 20-03-2016

La pseudo-class :checked en CSS

La pseudo-class :checked en CSS

El selector de la pseudo-class :checked representa (permite seleccionar) a cualquier elemento HTML radio, checkbox u option.

Andrés Cruz 26-01-2015

Cómo crear un menú de opciones tipo rueda con CSS y HTML

Cómo crear un menú de opciones tipo rueda con CSS y HTML

Veremos algunos botones cuyo menú será desplegado al pulsar (evento clic) o posicionarnos encima de los mismos (evento hover) sobre el mismo en forma de una rueda; los mismos fueron inspirados del Material Design.

Andrés Cruz 01-08-2017