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 retos que supone mantener largos archivos CSS y al mismo tiempo mantenerlos organizados, escalables y legibles. También aprenderás que muchos diseñadores y desarrolladores de front-end recomiendan utilizar un lenguaje de preprocesamiento 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. Te diremos qué es un preprocesador CSS, por qué lo necesitas y cómo instalarlo y empezar a utilizarlo de inmediato

¿Qué 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 la necesidad de los diseñadores de disponer de un lenguaje de hojas de estilo que les permita hacer más con menos esfuerzo y tiempo. Los lenguajes de preprocesamiento CSS, como Sass, 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 preprocesamiento que ejecuta un script en el servidor y genera una salida HTML. Del mismo modo, Sass preprocesa archivos .scss para generar archivos CSS que puedan ser utilizados por los navegadores

Desde la versión 3.8, los estilos del área de administración de WordPress fueron portados para utilizar Sass para el desarrollo. Hay muchas tiendas de temas 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 de temas utilizan un entorno de desarrollo local para trabajar en sus temas antes de desplegarlos en un entorno de preparación o en un servidor real. Como Sass es un lenguaje de preprocesamiento, tendrás que instalarlo en tu entorno de desarrollo local

Lo primero que tienes que hacer es instalar Sass. Se puede utilizar como una herramienta de línea de comandos, pero también hay algunas buenas aplicaciones de interfaz gráfica de usuario disponibles para Sass. Recomendamos utilizar Koalaque es una aplicación gratuita de código abierto disponible para Mac, Windows y Linux

Para este artículo, necesitarás crear un tema en blanco. Simplemente crea una nueva carpeta en /wp-content/themes/. Puedes llamarla 'mytheme' o cualquier otra cosa que quieras. Dentro de tu carpeta de temas en blanco crea otra carpeta y llámala hojas de estilo

En la carpeta stylesheets, tienes que crear un style.scss utilizando un editor de texto como el Bloc de notas

Ahora tienes que abrir Koala y hacer clic en el icono del signo más para añadir un nuevo proyecto. A continuación, localiza el directorio de tu tema y añádelo como proyecto. Verás que Koala encontrará automáticamente el archivo Sass en tu directorio de hojas de estilo y lo mostrará

Haz clic con el botón derecho en tu archivo Sass y selecciona Establecer ruta de salida ...]. Ahora selecciona la raíz del directorio de tu tema, por ejemplo /wp-content/themes/mytheme/ y pulsa enter. Koala generará ahora un archivo de salida CSS en el directorio de tu tema. Para probarlo, tienes que abrir tu archivo Sass style.scss en un editor de texto como el Bloc de notas y añadir este código

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

Ahora tienes que guardar los cambios y volver a Koala. Haz clic con el botón derecho en tu archivo Sass, y la barra lateral se deslizará a la derecha. Para compilar tu archivo Sass simplemente haz clic en el botón 'Compilar' botón "Compilar". Puedes ver los resultados abriendo el style.css en el directorio de tu tema, y tendrá el CSS procesado así

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

Observa que hemos definido una variable $fonts en nuestro archivo Sass. Ahora, cada vez que necesitemos añadir una familia de fuentes, no tendremos que volver a escribir los nombres de todas las fuentes. Sólo tenemos que utilizar $fonts

¿Qué otros superpoderes aporta Sass al CSS?

Sass es increíblemente potente, compatible con versiones anteriores y súper fácil de aprender. Como hemos mencionado antes, puedes crear variables, anidación, mixins, importación, parciales, operadores matemáticos y lógicos, etc. Ahora te mostraremos algunos ejemplos, y podrás probarlos en tu tema de WordPress

Gestión de múltiples hojas de estilo

Un problema común al que te enfrentarás como diseñador de temas de WordPress son las grandes hojas de estilo con muchas secciones. Probablemente te desplazarás mucho hacia arriba y hacia abajo para arreglar cosas mientras trabajas en tu tema. Con Sass, puedes importar varios archivos a tu hoja de estilos principal y generar un único archivo CSS para tu tema

¿Qué pasa con CSS @import?

El problema de utilizar @import en tu archivo CSS es que cada vez que añades un @import, tu archivo CSS hace otra petición HTTP al servidor. Esto afecta al tiempo de carga de tu página, lo que no es bueno para tu proyecto. Por otro lado, cuando utilizas @import en Sass, éste incluirá los archivos en tu archivo Sass y los servirá todos en un único archivo CSS para los navegadores

Para aprender a utilizar @import en Sass, primero tienes que crear un reset.scss en el directorio de hojas de estilo de tu tema y pegar en él este código

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, 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, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

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

@import 'reset';

Fíjate en que no necesitas introducir el nombre completo del archivo. Para compilarlo, tienes que abrir Koala y hacer clic de nuevo en el botón de compilación. Ahora abre el archivo principal style.css de tu tema, y verás tu css restablecido incluido en él

Nestin en Sass

A diferencia del HTML, el CSS no es un lenguaje anidado. Sass te permite crear archivos anidados que son fáciles de manejar y trabajar. Por ejemplo, puedes anidar todos los elementos del <article> bajo el selector de artículos. Como diseñador de temas de WordPress, esto te permite trabajar en diferentes secciones y dar estilo a cada elemento fácilmente. Para ver nestin en acción, añade esto a tu style.scss archivo

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

Después de procesarlo saldrá el siguiente CSS

.entry-content p {
  font-size: 12px;
  line-height: 150%; }
.entry-content ul {
  line-height: 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 aspectos para los widgets, las entradas, los menús de navegación, la cabecera, etc. El uso de nestin en Sass hace que esté bien estructurado, y que no tengas que escribir las mismas clases, selectores e identificadores una y otra vez

Uso de Mixins en Sass

A veces necesitarás 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 los mixins son útiles. Vamos a añadir un mixin a tu archivo style.scss:

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

Este mixin básicamente oculta un texto para que no se muestre. Aquí tienes un ejemplo de cómo puedes utilizar este mixin para ocultar el texto de tu logotipo

.logo{
    background: url("logo.png");
    height:100px;
    width:200px;
    @include hide-text;
}

Fíjate en que tienes que usar @include para añadir un mixin. Después de procesarlo generará el siguiente CSS

.logo {
  background: url("logo.png");
  height: 100px;
  width: 200px;
  overflow: hidden;
  text-indent: -9000px;
  display: block; }

Los mixins también son muy útiles con los prefijos de los proveedores. Al añadir valores de opacidad o radio de borde, el uso de mixins puede ahorrarte mucho tiempo. Mira este ejemplo, en el que hemos añadido un mixin para añadir el radio del borde

@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 compilar, se generará el siguiente CSS

.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 tu interés por Sass para el desarrollo de temas de WordPress. Muchos diseñadores de temas de WordPress ya lo utilizan. Algunos llegan a decir que en el futuro todo el CSS será preprocesado, y que los desarrolladores de temas de WordPress tienen que mejorar. Déjanos saber tu opinión sobre el uso de un lenguaje preprocesador de CSS como Sass para el desarrollo de tu tema de WordPress dejando un comentario a continuación

Recursos adicionales

Sass Lang
El camino de Sass