Introducción a Sass para los nuevos diseñadores de temas de WordPress

Como nuevo diseñador de temas de WordPress, aprenderás rápidamente los desafíos de mantener archivos CSS largos mientras los mantienes organizados, escalables y legibles. También aprenderá que muchos diseñadores y desarrolladores de front-end recomiendan usar un lenguaje de preprocesadores CSS como Sass o LESS. Pero, ¿qué son estas cosas? y ¿cómo se empieza con ellas? Este artículo es una introducción a Sass para los nuevos diseñadores de temas de WordPress. Le diremos qué es un preprocesador CSS, por qué lo necesita, y cómo instalarlo y empezar a usarlo de inmediato.

¿Qué es Sass?

El CSS que usamos fue diseñado para ser un lenguaje de hojas de estilo fácil de usar. Sin embargo, la web ha evolucionado, así como la necesidad de los diseñadores de tener un lenguaje de hojas de estilo que les permita hacer más con menos esfuerzo y tiempo. Los lenguajes de preprocesador CSS, como Sass, le permiten utilizar características que no están disponibles actualmente en el CSS, como el uso de variables, operadores matemáticos básicos, anidamiento, mixins, etc.

Es muy parecido a PHP, que es un lenguaje de preprocesadores que ejecuta un script en el servidor y genera una salida HTML. Del mismo modo, Sass procesa previamente los archivos.scss para generar archivos CSS que pueden ser utilizados por los navegadores.

Desde la versión 3.8, los estilos del área de administración de WordPress se han portado para utilizar Sass para el desarrollo. Hay muchas tiendas temáticas de WordPress y desarrolladores que ya utilizan Sass para acelerar su proceso de desarrollo.

Cómo empezar con Sass para el desarrollo de temas de WordPress

La mayoría de los diseñadores temáticos utilizan el entorno de desarrollo local para trabajar en sus temas antes de implementarlo en un entorno de puesta a disposición o en un servidor activo. Dado que Sass es un lenguaje de preprocesadores, deberá instalarlo en su entorno de desarrollo local.

Lo primero que debe hacer es instalar Sass. Puede ser usado como una herramienta de línea de comandos, pero también hay algunas aplicaciones GUI disponibles para Sass. Recomendamos usar Koala, que es una aplicación gratuita de código abierto disponible para Mac, Windows y Linux.

Por el bien de este artículo, tendrá que crear un tema en blanco. Simplemente cree una nueva carpeta en /wp-content/themes/. Puedes llamarlo'tema' o cualquier otra cosa que quieras. Dentro de la carpeta de temas en blanco, cree otra carpeta y nómbrela como hojas de estilo.

En la carpeta de hojas de estilo, necesita crear un archivo style.scss usando un editor de texto como el Bloc de notas.

Ahora necesitas abrir Koala y hacer clic en el icono más para añadir un nuevo proyecto. A continuación, busque su directorio temático y añádalo como su proyecto. Usted notará que Koala encontrará automáticamente el archivo Sass en su directorio de hojas de estilo y lo mostrará.

Haga clic con el botón derecho en su archivo Sass y seleccione la opción Establecer ruta de salida . Ahora seleccione la raíz de su directorio temático, por ejemplo, /wp-content/themes/mytheme/ y pulse enter. Koala ahora generará un archivo de salida CSS en su directorio temático. Para probar esto necesita abrir su archivo Sass style.scss en un editor de texto como el Bloc de notas y añadir este código:

1234$fonts: arial, verdana, sans-serif; body { font-family:$fonts;}

Ahora necesitas guardar tus cambios y volver a Koala. Haga clic con el botón derecho en el archivo Sass y la barra lateral se deslizará a la derecha. Para compilar su archivo Sass simplemente haga clic en el botón 'Compilar' . Puedes ver los resultados abriendo el archivo style.css en tu directorio de temas, y tendrá el CSS procesado así:

12body { font-family: arial, verdana, sans-serif; }

Note que hemos definido una variable $fonts en nuestro archivo Sass. Ahora, siempre que necesitemos añadir una familia de fuentes, no tendremos que volver a escribir los nombres de todas las fuentes. Podemos usar sólo $fonts.

¿Qué otras superpotencias traen al CSS?

Sass es increíblemente potente, compatible con versiones anteriores y súper fácil de aprender. Como mencionamos anteriormente se pueden crear variables, nesting, mixins, importación, parciales, operadores matemáticos y lógicos, etc. Ahora le mostraremos algunos ejemplos, y puede probarlos en su tema de WordPress.

Manejo de múltiples hojas de estilo

Un problema común al que te enfrentarás como diseñador de temas de WordPress son las hojas de estilo grandes con muchas secciones. Es probable que se desplace hacia arriba y hacia abajo mucho para arreglar las cosas mientras trabaja en el tema. Con Sass, puede importar varios archivos a su hoja de estilo principal y generar un único archivo CSS para su tema.

¿Qué hay de CSS @import?

El problema con el uso de @import en su archivo CSS es que cada vez que agrega un @import, su archivo CSS hace otra petición HTTP al servidor. Esto afecta el tiempo de carga de su página, lo que no es bueno para su proyecto. Por otro lado, cuando utilice @import en Sass, incluirá los archivos de su archivo Sass y los servirá a todos en un único archivo CSS para los navegadores.

Para aprender a usar @import en Sass, primero debe crear un archivo reset.scss en el directorio de hojas de estilo de su tema y pegar este código en él.

12345678910111213141415161718192021222324252627282930313233343536373839404142434445464464748/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licencia: ninguno (dominio público)*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acrónimo, dirección, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, fig caption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; acolchado: 0; frontera: 0; tamaño de fuente: 100%; fuente: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { comillas: none;}blockquote:before, blockquote:after,q:before, q:after, q:after { content: contenido: ninguno; tabla: colapso: colapso: colapso; espaciamiento de bordes: 0;}

Ahora necesitas abrir tu archivo principal style.scss y añadir esta línea donde quieres que se importe el archivo de restablecimiento:

1@import 'reset';

Tenga en cuenta que no es necesario introducir el nombre completo del fichero. Para compilar esto, necesita abrir Koala y hacer clic de nuevo en el botón de compilar. Ahora abre el archivo style.css principal de tu tema, y verás tu css de restablecimiento incluido en él.

Nido en Sass

A diferencia de HTML, CSS no es un lenguaje anidado. Sass le permite crear archivos anidados que son fáciles de administrar y con los que trabajar. Por ejemplo, puede anidar todos los elementos de la sección, bajo el selector de artículos. Como diseñador de temas de WordPress, esto te permite trabajar en diferentes secciones y estilizar cada elemento fácilmente. Para ver nestin en acción, añádelo a tu archivo style.scss:

12345678910111213.entry-content { p { font-size:12px;line-height:150%; } ul { line-height:150%; }a:link, a:visited, a:active { text-decoration:none;color: #ff6633;} }

Una vez procesado, emitirá la siguiente CSS:

12345678.entry-content p { tamaño de fuente: 12px; altura de línea: 150%; }.entry-content ul { altura de línea: 150%; }.entry-content a:link, .entry-content a:visited, .entry-content a:active { text-decoration: none; color: #ff6633; }

Como diseñador de temas, estarás diseñando diferentes estilos para widgets, mensajes, menús de navegación, encabezados, etc. El uso de nestin en Sass lo hace bien estructurado, y no tiene que escribir las mismas clases, selectores e identificadores una y otra vez.

Uso de mezclas en Sass

A veces necesitarías reutilizar algo de CSS a lo largo de tu proyecto aunque las reglas de estilo sean las mismas porque las usarás en diferentes selectores y clases. Aquí es donde las mezclas son útiles. Permite agregar una mezcla a su archivo style.scss:

12345@mixin hide-text{ overflow:hidden; text-indent:-9000px; display:block;}

Esta mezcla básicamente oculta algo de texto para que no se muestre. He aquí un ejemplo de cómo puede utilizar esta mezcla para ocultar el texto de su logotipo:

123456.logo{ fondo: url("logo.png"); altura:100px; ancho:200px; @incluir ocultar texto;}

Note que necesita usar @include para agregar una mezcla. Una vez procesado, generará la siguiente CSS:

1234567.logo { fondo: url("logo.png"); altura: 100px; anchura: 200px; desbordamiento: oculto; texto-indentado: -9000px; display: bloque; }

Las mezclas también son muy útiles con los prefijos de los proveedores. Cuando se añaden valores de opacidad o radio de borde, el uso de mezcladores puede ahorrar mucho tiempo. Mira este ejemplo, donde hemos añadido un mixin para añadir un radio de borde.

12345678910@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius;} .largebutton { @include border-radius(10px); } }.smallbutton { @include border-radius(5px); }.

Después de la compilación, generará el siguiente CSS:

12345678910111213.largebutton { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .smallbutton { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }

Esperamos que este artículo haya despertado su interés en Sass para el desarrollo del tema de WordPress. Muchos diseñadores de temas de WordPress ya lo están usando. Algunos llegan incluso a decir que en el futuro todos los CSS serán preprocesados, y los desarrolladores de temas de WordPress necesitan mejorar su juego. Háganos saber lo que piensa acerca del uso de un lenguaje de preprocesador CSS como Sass para el desarrollo de su tema de WordPress dejando un comentario a continuación.

Recursos adicionales

Sass Lang
El camino Sass