En la primera parte de esta serie, echamos un vistazo general a los preprocesadores de CSS más populares: LESS y SASS. En la segunda parte, revisamos LESS y CodeKit.
Ahora veremos con más detalle la estructura lógica con LESS, cómo conectar todos los elementos y algunos ejemplos prácticos:
- 1) Utilizar pre-procesadores de CSS en WordPress
- 2) Utilizar pre-procesadores de CSS en WordPress: LESS y CodeKit
- 3) Utilizar pre-procesadores de CSS en WordPress: Estructura con LESS
Creación de «Child Theme» (tema hijo)
Vamos a crear un child theme para el tema incluido por defecto en WordPress: «Twenty Twelve«. Para los usuarios que no están familiarizados con la creación de child themes, lo único que necesitamos es crear un archivo «style.css«.
Para comenzar, navega a la carpeta que contiene los archivos de los temas y plantillas: «wp-content«. Observarás la carpeta del tema que es de nuestro interés: «twentytwelve«, dentro de este elemento crea una nueva carpeta con el nombre «lessbuilt«.
Dentro de la carpeta «lessbuilt«, crea una nueva con el nombre «css«.
Dentro de la carpeta «css«, crea otra carpeta – esta vez con el nombre «less«. Dentro de esta nueva carpeta crea el archivo «style.less«.
Asegúrate que la ruta del archivo recién creado «style.less«, sea similar a:
Creación de la estructura de archivo LESS
Ya que tenemos nuestra carpeta «less«, es momento de añadir en ella todos nuestros archivos «.less«:
» Estilo
Lo primero es integrar el código que nos permita definir que estamos creando un child theme. Añade el siguiente código a tu archivo «style.less«:
Después vamos a crear los demás archivos «.less» y los relacionaremos desde el archivo «style.less«.
» Variables
Te sugerimos crear el archivo «variables.less«, este archivo almacenará todas las variables que utilizaremos para nuestro child theme. Todos los archivos «.less» tendrán acceso a estas variables, en este archivo y pega el código:
» Mixins
El siguiente archivo que debemos crear es «mixins.less«, la mayoría de los cambios que haremos serán a los colores de los enlaces, por lo tanto voy a crear un «mixin» que tendrá un color para el enlace en sí, y otro color para el efecto «hover» (sobre) del enlace.
Crea el archivo «mixins.less» con el siguiente código:
» Misc
La diversos estilos de elementos como «body» y los «enlaces» serán almacenados en el archivo «misc.less«, el cual deberá contener lo siguiente:
» Navegación
Sugerimos mantener todos los estilos de navegación juntos, de esta forma si requieres realizar algún ajsute, puedes editar rápidamente los menús. Crea el archivo «navigation.less«, e incluye las siguientes líneas de código:
» Encabezado
Ahora es momento de añadir los estilos para el título de nuestro sitio y su descripción, que forman parte del encabezado. Crea el archivo «header.less«, e incluye lo siguiente:
» Entradas
Como deseo cambiar el color del título y el color de los enlaces del pie de página de las entradas, es necesario el archivo «posts.less» con los siguientes estilos:
» Páginas
De forma similar a como lo hicimos con las entradas, para las páginas me gustaría definir estilos únicos. Para hacer esto, crea un archivo «pages.less» y añáde lo siguiente:
» Sidebar
Por ejemplo, si queremos añadir un borde a la izquierda de la barra lateral, utilizaremos el archivo «sidebar.less» con el stilo:
» Widgets
Queremos que los títulos del widget estén en color blanco, y los enlaces de estos elementos deberán coincidir con los otros enlaces de nuestro child theme. Te sugerimos colocar todos los estilos de los widgets en el archivo «widgets.less«, y mantener el estilo del contenedor al que pertenecen en el archivo «sidebar.less«.
Nuestro archivo «widgets.less» incluirá los siguiente:
» Pie de página
El último archivo por crear es «footer.less«, este elemento debe incluir los estilos del pie de página de nuestro child theme:
Integración de todos los archivos
Ya tenemos todos nuestros archivos «.less» con los estilos específicos, la forma de integrar todos estos elementos es a través del uso de «imports«. La sintaxis para utilizar «imports» en LESS funciona similar a la utilizada en CSS. Debido a que nuestros archivos «.less» se encuentran en la misma carpeta, utilizaremos lo siguiente:
En nuestro archivo «style.less» añadiremos las importaciones de cada uno de los archivos «.less» que fueron creados. Por ejemplo, si importamos las «variables.less» y «widgets.less» en nuestro «style.less«, entonces las variables que definimos en el archivo «variables.less» serán accesibles para «widgets.less«.
Estilo final
Comentarios finales
Una de las tantas ventajas de utilizar LESS para crear el CSS, es la posibilidad de elegir el tipo de formato a compilar. A través de esta serie especial te mostramos la creación de todos los archivos, cómo integrarlos e importarlos a través del archivo «style.less«.
Para terminar estos son algunos enlaces que pueden ser de tu interés:
Deja una respuesta