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

Como nuevo diseñador de temas de WordPress, aprendes rápidamente los desafíos de mantener archivos CSS largos mientras los mantienes organizados, escalables y legibles.

Muchos diseñadores y desarrolladores front-end, incluidos los de WPBeginner, recomiendan usar un lenguaje preprocesador de CSS como Sass o LESS para facilitar el trabajo. Pero, ¿qué son estos preprocesadores? ¿Y cómo empiezas con ellos?

Este artículo es una introducción a Sass para nuevos diseñadores de temas de WordPress. Te diremos qué es un preprocesador de CSS, por qué lo necesitas y cómo instalarlo y empezar a usarlo de inmediato.

¿Qué es Sass (Syntactically Awesome Stylesheet)?

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, y los diseñadores necesitan tener un lenguaje de hojas de estilo que les permita hacer más con menos esfuerzo y tiempo.

Los lenguajes preprocesadores de CSS, como Sass, te permiten usar características que actualmente no están disponibles en CSS, como variables, operadores matemáticos básicos, anidación, mixins, etc.

Es muy parecido a PHP, que es un lenguaje 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 de temas de WordPress y desarrolladores que ya utilizan Sass para acelerar su proceso de desarrollo.

Introducción a 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 implementarlos en un entorno de staging o un servidor en vivo. Dado que Sass es un lenguaje preprocesador, necesitarás instalarlo en tu entorno de desarrollo local.

Lo primero que necesitas hacer es instalar Sass. Se puede usar como una herramienta de línea de comandos, pero también hay algunas aplicaciones GUI agradables disponibles para Sass. Recomendamos usar Koala, que 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 nombrarla 'mytheme' o cualquier otro nombre que desees. Dentro de la carpeta de tu tema en blanco, crea otra carpeta y nómbrala stylesheets.

En la carpeta stylesheets, necesitas crear un archivo style.scss usando un editor de texto como el Bloc de notas.

Ahora necesitas abrir Koala y hacer clic en el ícono de más para agregar un nuevo proyecto. Luego, localiza el directorio de tu tema y agrégalo como tu proyecto. Notarás que Koala encontrará automáticamente el archivo Sass en tu directorio de hojas de estilo y lo mostrará.

Haz clic derecho en tu archivo Sass y selecciona la opción Establecer ruta de salida. Ahora selecciona la raíz de tu directorio de tema, por ejemplo, /wp-content/themes/mytheme/ y presiona enter. Koala generará ahora el archivo de salida CSS en tu directorio de tema.

Para probar esto, necesitas abrir tu archivo Sass style.scss en un editor de texto como el Bloc de notas y agregar este código:

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

Ahora necesitas guardar tus cambios y regresar a Koala. Haz clic derecho en tu archivo Sass y la barra lateral se deslizará hacia la derecha. Para compilar tu archivo Sass, simplemente haz clic en el botón ‘Compilar’.

Puedes ver los resultados abriendo el archivo style.css en tu directorio de tema, y tendrá el CSS procesado como este:

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

Nota que hemos definido una variable $fonts en nuestro archivo Sass. Ahora, cada vez que necesitemos agregar una familia de fuentes, no necesitaremos escribir nuevamente los nombres de todas las fuentes. Simplemente podemos usar $fonts.

¿Qué otros superpoderes trae Sass a CSS?

Sass es increíblemente potente, compatible con versiones anteriores y súper fácil de aprender. Como mencionamos anteriormente, puedes crear variables, anidamiento, mixins, importar, parciales, operadores matemáticos y lógicos, etc.

Ahora te mostraremos algunos ejemplos, y puedes probarlos en tu tema de WordPress.

Administración de múltiples hojas de estilo

Un problema común que enfrentarás como diseñador de temas de WordPress son las hojas de estilo grandes con muchas secciones. Probablemente tendrás que desplazarte mucho hacia arriba y hacia abajo para arreglar cosas mientras trabajas en tu tema.

Usando Sass, puedes importar múltiples archivos a tu hoja de estilo principal y generar un único archivo CSS para tu tema.

¿Qué hay de @import de CSS?

El problema de usar @import en tu archivo CSS es que cada vez que agregas un @import, tu archivo CSS realiza otra solicitud HTTP al servidor. Esto afecta el tiempo de carga de tu página, lo cual no es bueno para tu proyecto.

Por otro lado, cuando usas @import en Sass, incluirá los archivos en tu archivo Sass y los servirá todos en un único archivo CSS para los navegadores.

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

/* 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 necesitas abrir tu archivo principal style.scss y agregar esta línea donde quieras que se importe el archivo de reinicio:

@import 'reset';

Nota que no necesitas ingresar el nombre completo del archivo. Para compilar esto, necesitas abrir Koala y hacer clic en el botón de compilar nuevamente. Ahora abre el archivo principal style.css de tu tema, y verás tu CSS de reinicio incluido en él.

Anidamiento en Sass

A diferencia de HTML, CSS no es un lenguaje anidado. Sass te permite crear archivos anidados que son fáciles de administrar y con los que trabajar. Por ejemplo, puedes anidar todos los elementos de la sección <article>, bajo el selector de artículo.

Como diseñador de temas de WordPress, esto te permite trabajar en diferentes secciones y estilizar cada elemento fácilmente. Para ver el anidamiento en acción, agrega esto a tu archivo style.scss:

.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, generará 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, diseñarás una apariencia y sensación diferentes para los widgets, publicaciones, menús de navegación, encabezado, etc. Usar el anidamiento en Sass lo hace bien estructurado, y no tienes 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 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. Agreguemos un mixin a tu archivo style.scss:

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

Este mixin básicamente oculta cierto texto para que no se muestre. Aquí tienes un ejemplo de cómo puedes usar este mixin para ocultar texto para tu logo:

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

Nota que necesitas usar @include para agregar 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 prefijos de proveedor. Al agregar valores de opacidad o radio de borde, usar mixins puede ahorrarte mucho tiempo. Mira este ejemplo, donde hemos agregado un mixin para agregar 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 compilarlo, 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; }

Recursos adicionales

Sass Lang
The Sass Way

Esperamos que este artículo te haya ayudado a aprender sobre Sass para el desarrollo de temas de WordPress. Muchos diseñadores de temas de WordPress ya lo están utilizando. Algunos llegan a decir que en el futuro todo el CSS se preprocesará, y los desarrolladores de temas de WordPress necesitan mejorar su juego. También puedes consultar nuestra guía sobre consejos de clase de cuerpo de WordPress para diseñadores de temas, o nuestras selecciones expertas de los mejores constructores de páginas de arrastrar y soltar de WordPress.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.