El desarrollo de interfaz de usuario no es sólo hacer que los elementos luzcan grandiosos, también se trata de hacer las cosas bien estructuradas y de forma eficiente. Durante los dos últimos años hemos visto el nacimiento de pre-preprocesadores de CSS, herramientas que permiten escribir y mantener código en las hojas de estilo de una forma más rápida y con menor esfuerzo.
- 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
En esta primer entrada de la serie «Uso de pre-procesadores de CSS en WordPress«, echaremos un vistazo a los pre-procesadores de CSS más populares que podemos integrar al desarrollo de temas en WordPress.
Acerca de los pre-procesadores de CSS
Actualmente existen varios pre-procesadores de CSS, los más utilizados son «LESS» y «SASS«, ambas herramientas son sintácticamente similares y pueden aumentar drásticamente tu velocidad de escritura de CSS.
» Pre-procesador de CSS: LESS
«LESS» es un lenguaje de estilos dinámicos, permite la escritura de CSS a través de un archivo «.less«, y compilar su salida en un archivo «.css«. El lenguaje de compilación para LESS es JavaScript, lo cual te permitirá ejecutar el compilador desde un servidor.
LESS incluye características clave como: Uso de variables, Mixins (variables y propiedades de un conjunto de reglas), Reglas anidadas, Namespaces (permiten agrupar las variables o mixins).
Dos de los frameworks más populares que utiliza LESS son:
» Pre-procesador de CSS: SASS
«SASS» es una extensión de CSS3, tiene dos sintaxis: «.scss» (la sintaxis más común) y «.sass«.
SASS incluye características clave como: Uso de variables, Mixins (variables y propiedades de un conjunto de reglas – similar a LESS), Reglas anidadas, Selector inheritance (permite a un selector heredar los estilos de otro sin duplicar las propiedades CSS – no disponible en LESS).
Dos de los frameworks más populares que utiliza SASS son:
Comentarios finales
El uso de pre-preprocesadores de CSS en WordPress ha tenido un crecimiento exponencial, ya que permite a los desarrolladores y diseñadores acelerar dramáticamente el proceso de escritura y edición de estilos.
Estas dos herramientas también son de gran ayuda para estructurar el CSS como lo harías con las funciones de otros lenguajes (PHP y JavaScript). Sigue al pendiente ya que en las próximas entradas conoceremos a mayor profundidad el pre-procesador LESS, y la integración de CodeKit a tus proyectos de WordPress.
franklin dice
Yo personalmente prefiero Sass, porque me adapte a trabajar a el, es sencillo y muy practivo