Publicada en

Utilizar pre-procesadores de CSS en WordPress: LESS y CodeKit

En la primera parte de esta serie, echamos un vistazo general a los preprocesadores de CSS más populares: LESS y SASS. Ahora veremos con más detalle LESS, te mostraré las partes del lenguaje que se utilizan con mayor frecuencia, y cómo utilizarlo con CodeKit:

Esta seguna entrada forma parte de la serie:


Pre-procesador de CSS: LESS

Personalmente prefiero utilizar LESS para la mayoría de los proyectos de WordPress:


Variables

Puedes crear “viariables” en tu archivo “.less” y luego hacer una referencia a ellas desde otros lugares de ese archivo, u otros archivos. Las variables son muy útiles para los colores, fuentes, relleno y márgenes. Ejemplo de variables:

Que después se compilará en:

Si quisieras cambiar el color de los dos estilos del enlace, tan solo deberás cambiar la variable “@blue” de “#4874a7” a por ejemplo “#0263ae“.

Realiza el cambio en un sólo lugar, vuelve a compilar, y habrás cambiado todas las instancias de esa variable a lo largo del archivo. Otra buena idea para utilizar las variables, es a través del uso de “denominaciones semánticas” como “@primaryColor” o “@secondaryColor“, de esta manera puedes cambiarlas una vez, recompilar, y listo!


Reglas Anidadas

La “reglas anidadas” se utilizan justo como si quisieras anidar la lógica en un bloque “if/else” de tu PHP o JavaScript: estableces el selector de nivel superior como “.post“, y luego colocas los otros selectores dentro de él. Esto eliminará la necesidad de escribir repetidamente en los otros selectores:

Que después se compilará en:

También puedes utilizar “&” para concatenar selectores. Un ejemplo podría ser: si quieres elegir widgets específicos de la barra lateral para que el color de fondo de las “Entradas Recientes” y los “Comentarios Recientes” sean diferentes, puedes utilizar en LESS algo similar a:

Que después se compilará en:

Y por supuesto utilizar pseudo clases como “:hover“, “:active“, “:visited“, “:before“, “:after“:

Que después se compilará en:


Mixins

Mixins” son básicamente una serie de atributos de estilo que deseas agrupar. Un ejemplo son los diferentes atributos para los navegadores, por ejemplo “bordes redondeados“. En lugar de tener que recordar cada uno, puedes utilizar un “mixin” el cual te proporcionará cada atributo:

Que después se compilará en:

Si quisieras utilizar “bordes redondeados” varias veces en tu archivo “.less“, entonces puedes utilizar un “parámetro mixin“, aquí un ejemplo:

Que después se compilará en:


Integración de todos los elementos

A continuación un ejemplo del uso de variables, regalas anidadas y Mixins.. todo al mismo tiempo:

Que después se compilará en:


Uso de CodeKit

Utilizar pre-procesadores de CSS en WordPress: LESS y CodeKit

CodeKit es una poderosa aplicación que se encargará de compilar automáticamente Less, está aplicación está disponible desde USD $25.00 para equipos con Mac OS 10.7, o superior.

Comprar CodeKit


Importación de un proyecto

Es muy fácil configurar un proyecto CodeKit. Basta con arrastrar y soltar la carpeta en CodeKit, o puedes hacer clic sobre el botón “+” de la parte inferior izquierda para utilizar el explorador de archivos y seleccionar una carpeta. Una vez hecho eso, CodeKit explorará automáticamente todos los archivos de esa carpeta y los agrupará en las siguientes categorías:

  • Estilos
  • Scripts
  • Páginas
  • Imágenes
Utilizar pre-procesadores de CSS en WordPress: LESS y CodeKit
Agrupación de los archivos por categorías con CodeKit

Configuración de un proyecto

Una vez que hayas importado los archivos del proyecto, lo siguiente es configurar la ruta de salida de los archivos “.less“. Te sugiero utilizar dos carpetas: “css” y “less“. Y deberás asegurarte de tener todos los archivos en esa carpeta less que harán referencia a tu archivo “style.less“.

El archivo “style.less” deberá ser compilado en la carpeta raíz de tu tema bajo el nombre “style.css“. Para hacer esto, haz clic derecho sobre el archivo “style.less” y selecciona “Establecer ruta de salida…“. Esta acción abrirá el explorador de archivos.

Utilizar pre-procesadores de CSS en WordPress: LESS y CodeKit
Establecer la ruta de salida

A continuación, tendrás que hacer clic sobre el nombre del archivo de salida y texto de extensión. Una vez hecho esto, es posible llenar de forma automática el “style.css“. De otra forma, tendrás que entrar al archivo “style.css“. Para guardar los cambios basta con hacer clic en “Seleccionar“.

Ahora es momento de seleccionar una configuración de compilación. Podrás observar la pantalla de configuración de compilación al hacer clic en un archivo “.less“. Básicamente contamos con tres estilos de salida:

  • Regular
  • Minified
  • Compressed (YUI)
Utilizar pre-procesadores de CSS en WordPress: LESS y CodeKit
Estilos de salida con CodeKit

Selecciona un estilo de salida y haz clic en “Compilar“. Recibirás una notificación mencionado que tu archivo “style.less” ha sido compilado. Si la sintaxis es correcta, tu compilación tendrá éxito. Si ocurre algún error, tendrás acceso al registro y al número de línea con la explicación del error. Si todo se compila correctamente, serás capaz de abrir el archivo “style.css” y ver su salida.

Recuerda: Al editar y guardar los archivos “.less“, CodeKit los recompilará de forma automática.

Comentarios finales

En esta entrada hemos revisado con mayor detalle LESS, CodeKit, y las funciones más populares. En la siguiente entrada te mostraremos la forma de estructurar las archivos “.less” y cómo conectarlos en conjunto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *