Diseño, Tutoriales, WordPress | 2 de abril de 2014

Usando Less en WordPress

Este es un pequeño extracto del e-book que estoy escribiendo acerca de la creación de temas de WordPress. Si te gusta lo que ves aquí recuerda suscribirte al final del artículo, para avisarte cuando el ebook esté listo y enviarte un capítulo gratis.

Hoy en día la creación de estilos CSS es mucho más amigable de lo que era hace un par de años gracias a la existencia de preprocesadores y el aumento de su popularidad.

Lo que hace un preprocesador es básicamente permitirnos escribir CSS en un modo mucho más sencillo y rápido de lo que sería hacerlo con CSS convencional gracias a que integra elementos de otro tipo de lenguajes, permitiéndonos entre otras cosas la creación de variables y clases reutilizables.

Hay una amplia variedad disponible para nuestro uso, entre ellos Sass, Stylus y Less, siendo este último mi opción personal, ya que su sintaxis es la más similar a CSS nativo, por lo que no hubo necesidad de aprender algo nuevo sino complementar lo que ya sabía.

Te mostraré a continuación, algunas de las características de Less, que más me ayudan a desarrollar CSS rápido y con seguridad:

Indentación

Cuando escribimos CSS y queremos estilizar un elemento que está dentro de otro, tenemos que repetir su identificador:

Sin embargo, cuando estamos trabajando con Less, basta solo con indentar el nuevo elemento y obtendremos el mismo resultado:

Esto también aplica cuando queremos resaltar un estado del mismo elemento. Si tomamos el ejemplo anterior y quisiéramos que el párrafo cambiara su color a azul en el estado :hover, tendríamos que hacerlo de la siguiente forma:

Lo cual es bastante sencillo considerando que en CSS estándar tendríamos que haberlo hecho así:

Gracias a la indentación nos ahorramos el estar escribiendo una y otra vez el nombre del elemento contenedor.

Variables

Usar variables es muy frecuente en casi todos los lenguajes de programación y gracias a Less también podemos utilizar esta lógica.

Podemos usar las variables, por ejemplo, para definir los colores y las fuentes de nuestro diseño. De este modo, si en una etapa avanzada del proyecto el cliente nos pide cambiar el color principal del sitio no tendremos que buscar a lo largo de todo el CSS en qué lugar utilizamos el color, sino simplemente actualizar la variable y el sitio se actualizará por completo.

Así se define una variable en Less:

Y luego la podemos usar de esta forma:

Algo muy interesante que podemos hacer con las variables de colores es obtener tonos más claros o más oscuros según sea nuestra necesidad, de esta forma en un elemento podemos utilizar 3 variables del mismo color sin siquiera tocar un código hexadecimal:

 Clases reutilizables

En Less también podemos crear clases con propiedades CSS que podremos utilizar a nuestro antojo, ahorrándonos escribir las mismas propiedades una y otra vez en cada elemento.

Veamos un ejemplo de bordes redondeados:

Pero eso no es todo, podemos integrar una clase reutilizable con una variable específica, para manejar el valor en cada ocasión que apliquemos la clase:

Compilación y separación de archivos

Para que podamos aplicar los estilos Less a nuestro diseño en el navegador tenemos 3 maneras de hacerlo:

  1. Instalar Less directamente en el servidor web
  2. Usando un archivo JavaScript que permitirá que el navegador entienda los archivos Less
  3. Compilar localmente los archivos Less en un solo archivo CSS y desde el diseño simplemente llamar al este archivo.

La opción que yo uso es la tercera, ya que me permite olvidarme de configuraciones avanzadas en el servidor y de sobrecargar la página con archivos JS.

Para compilar los archivos Less en un solo archivo CSS yo uso la aplicación gratuita SimpLESS. Su principal característica es que detecta cada vez que realizo un cambio en uno de los archivos Less y automáticamente vuelve a compilar los archivos y me devuelve un único CSS comprimido. Luego, desde mi tema, sólo hago referencia a este archivo.

Otro compilador que goza de gran popularidad es CodeKit, aunque compilar Less es solo una de las funciones que esta aplicación cumple.

Gracias a que las aplicaciones compliadoras nos entregar un archivo CSS comprimido, no tenemos ninguna necesidad de preocuparnos por la cantidad de archivos Less que utilicemos, podemos tener tantos como sea necesarios, cada uno de ellos destinado a aplicar estilos a una parte específica del diseño.

Mis archivos Less suelen ser los siguientes:

  • 01-vari-mix.less: Para definir las variables y clases reutilizables
  • 02-general.less: Para definir los estilos generales
  • 03-header.less: Para los estilos de la cabecera
  • 04-widgets.less: Para los estilos de Widgets
  • 05-content.less: Para los estilos del contenido
  • 06-footer.less: Para los estilos del pie de página
  • 07-form.less: Para los estilos de los elementos de formulario
  • 08-responsive.less: Para los estilos responsive
  • master.less: Para reunir todos los archivos anteriores

El archivo master.less no lleva estilos de ningún tipo, solamente incluye el resto de los archivos, de tal modo que desde SimpLESS solo pido procesar el archivo master.less y el resultado incluye los estilos de todos los archivos.

El archivo master.less luce así:

Esto es solo una pincelada

Lo que acabamos de ver es solo una parte las funcionalidades de Less, aunque para mí con esas características es suficiente para decidir no volver más a trabajar con CSS directamente ya que mi velocidad se ha aumentado un montón y el flujo de trabajo en mucho más amigable.

Podría seguir escribiendo muchas páginas más acerca de Less, pero eso está fuera del alcance de este artículo. Si quieres seguir aprendiendo más puedes ir a la página oficial o buscar algunos tutoriales en youtube ya que hay bastantes.

Ahora bien, si estás recién comenzando en el mundo del diseño web y no estás siquiera muy familiarizado con CSS te sugeriría que partieras aprendiendo bien el lenguaje básico antes de pasar a un lenguaje más avanzado como Less.

Bien, veamos ahora como integramos Less a un tema de WordPress.

Integrar Less en un tema

Integrar Less en un tema no es nada complicado ya que que en realidad no necesitamos integrar less, sino simplemente referenciar al archivo CSS comprimido que obtenemos resultado de la compilación de los archivos Less.

La carpeta less que suelo tener al interior de mis temas luce generalmente así:

Less

En esta estructura el archivo master.css, es el que incluiremos en nuestro tema, eso lo haremos desde style.css, de la siguiente forma:

Por lo general esa es toda la información que lleva mi archivo style.css, todo lo que dice referencia con los estilos necesarios para el diseño van dentro de master.css.

Esto es solo una sugerencia

Usar Less  para el diseño/desarrollo de temas es lo que para mí ha funcionado mejor y ha permitido aumentar mi productividad, sin embargo, esto no necesariamente funcionará del mismo modo para ti, por lo tanto, todo lo dicho respecto a Less es solo una sugerencia de mi parte y una invitación a probar esta alternativa.

Quizás mientras vayas probando otras opciones te sienta más cómodo trabajar con Sass o simplemente con CSS crudo.

Por otra parte, debo decir que mi trabajo en el desarrollo de temas siempre ha estado vinculado a la creación de sitios para clientes y no a la creación de temas comerciales para ofrecer en algún marketplace como ThemeForest o en el repositorio oficial de WordPress, por lo que no estoy 100% seguro de que trabajar los estilos de la forma propuesta sea la más apropiada para pasar el proceso de revisión y aprobación.

De cualquier manera, está en tus manos descubrir cuál es el método que mejor encaja con tus necesidades y tu rutina de trabajo.

También te podría interesar:

Introducción a Adobe XD

El tema que nos convoca hoy es Adobe Experience Design, también conocido como Adobe XD y quiero ayudarte a dar los primeros pasos con esta aplicación, así que vamos en orden: 1. Qué es Adobe XD En palabras simples podríamos decir que Adobe XD es la respuesta de Adobe a Sketch. Para entender esto tenemos […]

Seguir leyendo...

Entrevista en «Más allá del Diseño»

Esta semana tuve el placer de ser invitado al interesantísimo podcast «Más allá del diseño» con Diego González, un diseñador argentino muy apasionado por ayudar a los colegas que recién comienzan y hacer que el rubro sea cada vez más profesional. Para más información visita:  http://creativosestrategicos.com/entrevista-con-francisco-aguilera/

Seguir leyendo...

No tengo miedo a crear mi propia competencia

Muchas veces me han preguntado si no tengo miedo a crear mi propia competencia al estar publicando material educativo en mi sitio a modo de videos, tutoriales, artículos y cursos… La verdad es que no tengo miedo en absoluto y en este video te cuento el por qué 🙂 Si te gusta el show, suscríbete […]

Seguir leyendo...

Hay 2 opiniones

  1. Buenas noches Francisco, primero quiero decir que esta muy pero muy limpio tu blog, perfecto el diseño, lo siguiente es que voy a copiar tu estructura de archivos less y nombres! quizás cambiar algunos, pero me parece una ídea genial la forma en que ordenas tus archivos, por otra parte quiero comenzar a usar less luego de que tuve oportunidad de trabajarlo en Magento 2, asi que ahora pienso hacer un tema comercial para wordpress usando less, gracias y muchos éxitos Francisco tu artículo me ha sido de mucha ayuda.

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 7.976 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.