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

Ley del cuadrado inverso con CSS

Ley del cuadrado inverso con CSS

Ondas con SVG y CSS

Ondas con SVG y CSS

Atomo con CSS

Atomo con CSS

Algunos artículos que te pueden interesar

La función calc en CSS

La función calc en CSS

Calc es una función disponible en CSS3 que permite realizar operaciones matemáticas desde el propio CSS; las operaciones de sumar ( + ), restar ( - ), multiplicar ( * ) y división ( / ) son soportadas a través de la función calc.

Andrés Cruz 16-02-2015

Formas geométricas con CSS (parte 2)

Formas geométricas con CSS (parte 2)

En esta entrada se explica cómo crear las siguientes figuras geométricas con solo CSS: pentágono, hexágono, octágono.

Andrés Cruz 28-05-2015

Usando CSS para validar visualmente campos del formulario

Usando CSS para validar visualmente campos del formulario

Con HTML5 podemos utilizar el atributo required para indicarle al navegador que este campo es requerido.

Andrés Cruz 19-08-2013