Accentsconagua

Usando Preprocesadores CSS con WordPress - ¿Qué son?

Código
Share

He estado trabajando con WordPress durante tres años, pero no fue hasta hace un año que tomé en serio el desarrollo de WordPress. Específicamente, me apasiona la temática infantil y dedico gran parte de mi tiempo a trabajar en el desarrollo de temas..

Durante los últimos dos años, hemos visto el aumento de los preprocesadores de CSS, principalmente, herramientas que facilitan la escritura de hojas de estilo y las hace más fáciles de mantener..

En esta serie, vamos a echar un vistazo a lo que son los preprocesadores, a los populares que están disponibles y cómo podemos integrarlos en nuestro desarrollo de temas..

Hacia donde nos dirigimos

Cuando se trata del desarrollo de la interfaz de usuario, no se trata solo de cómo hacer que las cosas se vean bien, sino que también se trata de hacer las cosas bien estructuradas y con el mejor desempeño posible, y creo que esto debería ser algo que se refleje en nuestros proyectos de WordPress , también.

En esta serie, planeo dar un poco de información sobre qué son los preprocesadores y resaltar algunos de los jugadores clave en el espacio. También hablaré sobre algunos de los marcos más populares. Luego pasaré a una inmersión más profunda en MENOS y explicaré por qué prefiero usarlo. Por último, cubriré cómo usarlo con CodeKit para compilar tu CSS para tu tema.

Sobre los Preprocesadores CSS

Como se mencionó, hay una serie de preprocesadores de CSS, el más utilizado es LESS y SASS. Ambos son sintácticamente similares y pueden aumentar dramáticamente la velocidad a la que puedes escribir tu CSS.

Existen algunas diferencias como sus compiladores y extensiones o marcos con los que se pueden combinar..

MENOS

LESS es un lenguaje dinámico de hojas de estilo. Puedes escribir tu CSS programáticamente en un .Menos archivo y compilar su salida en una .css expediente. El lenguaje de compilación para LESS es JavaScript. Esto es genial porque puede ejecutar el compilador en el lado del servidor o del lado del cliente.

Algunas de las características de MENOS incluyen:

  • Variables: las variables se pueden definir y se utilizan en todo el archivo. Haga un cambio en un lugar y véalo actualizado donde sea que se use.
  • Mixins: los mixins incluyen un conjunto de propiedades de un conjunto de reglas a otro conjunto de reglas. También puedes usar Mixins paramétricos que aceptan argumentos..
  • Reglas anidadas: las reglas anidadas le permiten usar el anidamiento en lugar de, o en combinación con la cascada.
  • Espacios de nombres: los espacios de nombres le permiten agrupar sus variables o combinaciones, con fines organizativos o simplemente para ofrecer algo de encapsulación..

Entraré en más detalles sobre la sintaxis de estos en la próxima publicación de esta serie..

Dos de los marcos front-end más populares que usan LESS son:

  • Oreja
  • Sin marco

HABLAR CON DESCARO A

SASS es una extensión de CSS3. Tiene dos sintaxis: .scss y .hablar con descaro a. .SCSS es la sintaxis más común que se usa, pero también es compatible con la sintaxis con sangría anterior.

Algunas de las características de SASS incluyen:

  • Variables: las variables se pueden definir y se utilizan en todo el archivo. Realice un cambio en un lugar y véalo actualizado donde sea usado como MENOS.
  • Mixins: los mixins le permiten reutilizar fragmentos enteros de CSS, propiedades o selectores como LESS
  • Anidar: evite la repetición anidando selectores entre sí como MENOS
  • Herencia de selector: puede decirle a un selector que herede todos los estilos de otro sin duplicar las propiedades CSS. No disponible en MENOS.

Aquí hay algunos marcos que incluyen SASS y SCSS:

  • Fundación
  • Gravedad
  • Sin marco

Conclusión

Los Preprocesadores CSS son definitivamente una tendencia creciente en diseño web. Pueden acelerar dramáticamente el tiempo que dedica a escribir estilos para sus sitios..

También pueden ayudar a estructurar tu CSS como lo harías con otras funciones en otros lenguajes como PHP o JavaScript. Si aún no está utilizando preprocesadores de CSS en su proyecto web, definitivamente debería considerarlo.

Ahora que hemos echado un vistazo a dos de los preprocesadores más populares, profundizaré en MENOS y daré algunas razones por las que personalmente elijo usarlo en la próxima publicación. También le mostraré cómo comenzar a usar CodeKit con sus proyectos de WordPress.

Recursos

  • MENOS
  • HABLAR CON DESCARO A
Código
×