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

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

Que es sass?

El CSS que utilizamos fue diseñado para ser un lenguaje de hojas de estilo fácil de usar. Sin embargo, la web ha evolucionado, y también lo es 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 del preprocesador CSS, como Sass, le permiten usar funciones 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 preprocesador que ejecuta un script en el servidor y genera una salida HTML. De manera similar, Sass preprocesa 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 portaron 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..

Comenzando con Sass para el desarrollo de temas de WordPress

La mayoría de los diseñadores de temas utilizan el entorno de desarrollo local para trabajar en sus temas antes de implementarlo en un entorno de prueba o en un servidor en vivo. Dado que Sass es un lenguaje de preprocesador, deberá instalarlo en su entorno de desarrollo local.

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

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

En la carpeta de hojas de estilo, necesita crear un estilo.scss Archivo usando un editor de texto como Notepad.

Ahora necesita abrir Koala y hacer clic en el icono más para agregar un nuevo proyecto. A continuación, ubique su directorio de temas y agréguelo como su proyecto. Notará que Koala buscará automáticamente el archivo Sass en su directorio de hojas de estilo y lo mostrará..

Haga clic derecho en su archivo Sass y seleccione Establecer ruta de salida opción. Ahora selecciona la raíz de tu directorio de temas, ejemplo, / wp-content / themes / mytheme / y pulsa enter. Koala ahora generará un archivo de salida CSS en su directorio de temas. Para probar esto necesitas abrir tu archivo Sass estilo.scss en un editor de texto como Notepad y agregue este código:

 $ fuentes: arial, verdana, sans-serif; body font-family: $ fonts;  

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

 body font-family: arial, verdana, sans-serif;  

Note que hemos definido una variable. $ fuentes en nuestro archivo Sass. Ahora, cuando sea necesario agregar una familia de fuentes, no necesitamos escribir los nombres de todas las fuentes nuevamente. Solo podemos usar $ fuentes.

Lo que otros superpoderes Sass trae a CSS?

Sass es increíblemente potente, compatible con versiones anteriores y muy fácil de aprender. Como mencionamos anteriormente, puede crear variables, anidamientos, combinaciones, importaciones, parciales, operadores matemáticos y lógicos, etc. Ahora le mostraremos algunos ejemplos y podrá probarlos en su tema de WordPress.

Gestión de múltiples hojas de estilo

Un problema común al que se enfrentará 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 su tema. Con Sass, puedes importar varios archivos a tu hoja de estilo principal y generar un único archivo CSS para tu tema.

¿Qué pasa con CSS @import?

El problema con el uso de @import en su archivo CSS es que cada vez que agrega un @import, su archivo CSS realiza otra solicitud HTTP al servidor. Esto afecta el tiempo de carga de tu página, lo que no es bueno para tu proyecto. Por otro lado, cuando use @import en Sass, incluirá los archivos en su archivo Sass y los servirá en un solo archivo CSS para los navegadores..

Para aprender a usar @import en Sass, primero necesita crear un reset.scss archiva en el directorio de hojas de estilo de tu tema y pega este código en él.

 / * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licencia: ninguna (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, grande, citar, código, del, dfn, em, img, ins, kbd, q, s, samp, pequeño, huelga, fuerte, sub, sup, tt, var, b, u, i, centro, dl, dt, dd, ol, ul, li, fieldset, formulario, etiqueta, leyenda, tabla, título, tbody, tfoot, thead, tr, th, td, artículo, aparte, lienzo, detalles, incrustar, figura, figcaption, pie de página, encabezado, hgroup, menu, nav, salida, ruby, sección, resumen, tiempo, marca, audio, video margen: 0; relleno: 0; borde: 0; tamaño de letra: 100%; fuente: heredar; alineación vertical: línea de base;  / * Reinicio de la función de visualización de HTML5 para navegadores antiguos * / artículo, aparte, detalles, figcaption, figure, footer, header, hgroup, menu, nav, section display: block;  body line-height: 1;  ol, ul estilo de lista: ninguno;  blockquote, q quotes: none;  blockquote: before, blockquote: after, q: before, q: after content: "; content: none; table border-collapse: collapse; border-spacing: 0; 

Ahora necesita abrir su archivo principal style.scss y agregar esta línea donde desea que se importe el archivo de restablecimiento:

 @import 'reset'; 

Observe que no necesita ingresar el nombre completo del archivo. Para compilar esto, necesita abrir Koala y hacer clic nuevamente en el botón de compilación. Ahora abra el archivo principal style.css de su tema, y ​​verá su css de reinicio incluido en él..

Nestin 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 trabajar con ellos. Por ejemplo, puedes anidar todos los elementos para el Sección, bajo el selector de artículos. Como diseñador de temas de WordPress, esto le permite trabajar en diferentes secciones y diseñar cada elemento fácilmente. Para ver nestin en acción, agregue esto a su estilo.scss expediente:

 .entry-content p font-size: 12px; línea de altura: 150%;  ul line-height: 150%;  a: enlace, a: visitado, a: activo text-decoration: none; color: # ff6633;  

Después de procesarlo saldrá el siguiente CSS:

 .entrada-contenido p font-size: 12px; línea de altura: 150%;  .entry-content ul line-height: 150%;  .entry-content a: link, .entry-content a: visit, .entry-content a: active text-decoration: none; color: # ff6633;  

Como diseñador de temas, diseñará diferentes aspectos de los widgets, publicaciones, 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 sobre y otra vez.

Usando Mixins en Sass

A veces necesitarás reutilizar algo de CSS en tu proyecto, aunque las reglas de estilo serán las mismas porque las usarás en diferentes selectores y clases. Aquí es donde los mixins son útiles. Permite agregar un mixin a tu archivo style.scss:

 @mixin hide-text overflow: hidden; texto-sangría: -9000px; bloqueo de pantalla;  

Básicamente, esta mezcla oculta el texto que se muestra. Este es un ejemplo de cómo puede usar esta combinación para ocultar el texto de su logotipo:

 .logo background: url ("logo.png"); altura: 100px; ancho: 200px; @incluir texto oculto;  

Tenga en cuenta que necesita utilizar @incluir para añadir un mixin. Después de procesarlo se generará el siguiente CSS:

 .logo background: url ("logo.png"); altura: 100px; ancho: 200px; desbordamiento: oculto; texto-sangría: -9000px; bloqueo de pantalla;  

Los mixins también son muy útiles con los prefijos de los proveedores. Al agregar valores de opacidad o radio de borde, utilizando mixins puede ahorrarle mucho tiempo. Mira este ejemplo, donde hemos agregado un mixin para agregar un radio de borde.

 @mixin border-radius ($ radius) -webkit-border-radius: $ radius; -moz-border-radius: $ radio; -ms-radio-borde: $ radio; -o-radio-borde: $ radio; radio del borde: $ radio;  .largebutton @include border-radius (10px);  .smallbutton @include border-radius (5px);  

Después de compilar, generará el siguiente CSS:

 .largebutton -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-radio-borde: 10px; -o-radio-borde: 10px; radio del borde: 10px;  .smallbutton -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-radio-borde: 5px; -o-radio-borde: 5px; radio del borde: 5px;  

Esperamos que este artículo haya despertado su interés en el desarrollo del tema Sass para WordPress. Muchos diseñadores de temas de WordPress ya lo están utilizando. Algunos van tan lejos como para decir que en el futuro todo CSS será preprocesado, y los desarrolladores de temas de WordPress necesitan mejorar su juego. Déjenos saber qué piensa acerca de usar 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 de Sass