Cómo usar Sass con WordPress: una guía paso a paso

Durante años, CSS ha sido mi lenguaje favorito para escribir mientras desarrollaba un sitio web. El aspecto del diseño o la capa de presentación de un sitio web siempre me había llamado la atención. El día que me presentaron a Sass me apagó al instante. Pensé para mis adentros: “¿Por qué diablos haría las cosas más difíciles para mí al desarrollar un sitio web? Ya tengo suficiente con lo que lidiar… ”

Desde una perspectiva externa, pensé en Sass como un lenguaje avanzado que agregaba complejidad inútil y configuraciones aturdidoras a mis proyectos. Poco sabía que, una vez aprendido, el idioma que pensé que era tan difícil me ahorraría tiempo, dolores de cabeza y mejoraría mi flujo de trabajo.

La realidad es que Sass (y otros preprocesadores de CSS) pueden ser un aliado extremadamente poderoso para cualquier diseñador o desarrollador interesado en escribir menos y hacer más . Al final, todos estos lenguajes de preprocesamiento se compilan en CSS. Entonces, si simplemente no le gusta la idea de usar un lenguaje de preprocesamiento, todavía está limpio.

Este artículo no pretende enseñarle Sass ni explicar por qué es tan poderoso. Más bien, mi intención es mostrarte cómo usarlo con WordPress; el CMS más común disponible en la actualidad y uno que amamos aquí en Elegant Themes.

requisitos previos

Este tutorial asume que tiene conocimientos prácticos sobre la configuración de un entorno de WordPress. Para fines de demostración, descargaré WordPress y lo ejecutaré localmente en mi máquina y le mostraré cada paso del camino. Esto puede ser una revisión para algunos de ustedes y nuevo para otros. Los invito a todos a seguir adelante a pesar de todo. Para obtener más información sobre cómo comenzar con WordPress, consulte algunas de nuestras otras publicaciones de blog .

Herramientas útiles

Antes de comenzar, recomiendo obtener algunas herramientas para facilitarle la vida al compilar su Sass. Trabajo en una Mac, así que personalmente uso CodeKit , pero puede usar cualquier otro preprocesador o incluso la buena línea de comandos que usaremos en este tutorial. Otra herramienta que usaré a lo largo de este tutorial es MAMP .

Configuración de una instalación local de WordPress

Para comenzar con WordPress, querrá dirigirse a wordpress.org para descargar la última versión.

Visite http://www.wordpress.org para descargar la última versión.

Después de desarchivar el archivo .zip, cámbiele el nombre y colóquelo en la carpeta htdocs que se instaló cuando instaló MAMP.

*User*/Applications/MAMP/htdocs/

Nuestra nueva carpeta sass-wp dentro de nuestra carpeta htdocs dentro de MAMP

En este punto, asegúrese de que MAMP esté activado. Abra la página de inicio en su directorio de WordPress recién instalado. En nuestro caso, debería estar en la url http://localhost:8888/sass-wp/ . En este punto, debería obtener un error. No se preocupe, solo necesitamos configurar nuestra instalación de WordPress para que se ejecute localmente, pero antes de crear nuestro archivo de configuración, debemos crear una base de datos para que WordPress la use.

Regrese a la página de inicio en MAMP y haga clic en PHPmyAdmin en el elemento del menú Herramientas . Una forma rápida de llegar es a través de la url http://localhost:8888/MAMP .

phpMyAdmin — http://localhost:8888/MAMP

Una vez que llegue a PHPmyAdmin, simplemente cree una nueva base de datos. Para este tutorial he llamado a nuestra base de datos sass-wp

A continuación, finalmente regresamos a nuestra instalación de WordPress en http://localhost:8888/sass-wp y hacemos clic en el botón Crear un archivo de configuración .

Ingrese su nombre de base de datos y nombre de usuario y contraseña

Asegúrese de incluir el nombre de su base de datos creada localmente (la que acaba de crear, la nuestra es sass-wp ), nombre de usuario y contraseña. Para este tutorial, llamamos a nuestra base de datos sass-wp y, dado que estamos usando MAMP, nuestro nombre de usuario y contraseña serán root .

Si todo está configurado correctamente, terminará en la pantalla de instalación. Ingrese toda la información sobre su sitio de WordPress y haga clic en Instalar WordPress . Una vez instalado, iniciará sesión y llegará a su panel de control.

Ver el tablero de WordPress significa que tenemos una instalación exitosa

Instalación de Sass y Compass

Sass tiene una dependencia de Ruby , por lo que debemos instalar la gema de Ruby para que funcione correctamente. La mayoría de las Mac vienen con Ruby instalado, pero si está en una máquina con Windows, es posible que deba buscar una solución alternativa. También usaremos Compass , un marco de trabajo de creación de CSS de código abierto que, listo para usar, proporciona muchas adiciones rápidas y útiles a Sass. Una alternativa a Compass es otro framework llamado Bourbon . Use el marco que desee o combine el tema como hago a veces. Visite la documentación de instalación en http://compass-style.org/install/ o http://bourbon.io/docs/ para obtener más información.

Instalación rápida

Para instalar Sass y Compass por primera vez, simplemente abra la herramienta de línea de comandos de su elección y escriba las pocas líneas de código a continuación.
Nota*: es posible que reciba un error sobre cómo obtener acceso a los directorios que está cambiando. Una solución rápida es escribir el comando sudo antes de todas estas líneas. Al hacerlo, se le solicitará la contraseña de su sistema. A partir de ahí, debería ver la instalación de Sass y Compass en su sistema.

$ gem update --system
$ gem install sass
$ gem install compass

Ahora que tenemos Sass y Compass instalados, debemos configurar la estructura de carpetas de nuestro tema.

Asegúrese de mantener abierto su editor de línea de comandos.

Configurando nuestro tema con Sass con Compass

Usaremos el tema veinticuatro para este tutorial. La estructura predeterminada de veinticuatro carpetas es la siguiente:

La estructura de archivos predeterminada del tema veinticuatro

Agregar los archivos y carpetas necesarios

Para comenzar, necesitamos agregar algunas carpetas y archivos.

Nuestro tema ya contiene un directorio de imágenes , pero si el suyo no lo tiene, deberá agregar uno.
También necesitamos crear un directorio sass . Esta carpeta contiene todos los archivos Sass que se van a compilar en CSS. Es probable que tenga un archivo Sass principal, pero existe la opción de agregar varios archivos, que explicaré en breve.
Dentro del directorio sass , deberá crear un archivo style.scss . El preprocesador apuntará a este archivo para compilarlo en el archivo CSS principal de su tema. Nota: el archivo CSS debe estar en la raíz del tema para que WordPress funcione correctamente. ¡Tiene que existir!
Dado que Sass se basa en Ruby, necesitamos crear un archivo config.rb para decirle a Sass/Compass dónde están los archivos. A continuación se muestra la carpeta de temas recién actualizada con los archivos y carpetas recién creados resaltados que muestran la nueva jerarquía.

El tema veinticuatro con nuestros nuevos archivos y carpetas para trabajar con Sass.

Los archivos resaltados en rojo arriba han sido agregados o referenciados en nuestra configuración de Sass (archivo config.rb) que cubriremos a continuación.

El archivo config.rb

Cada proyecto basado en Compass utiliza un archivo de configuración para definir nombres de carpetas/archivos y sus ubicaciones dentro de nuestros proyectos. En nuestro caso, el archivo config.rb se verá como el siguiente ejemplo. He agregado algunos comentarios para explicar lo que significa cada línea.

http_path = "/" #root level target path
css_dir = "." #targets our default style.css file at the root level of our theme
sass_dir = "sass" #targets our sass directory
images_dir = "images" #targets our pre existing image directory
javascripts_dir = "js" #targets our JavaScript directory
 
# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed
 
# To enable relative paths to assets via compass helper functions.
# note: this is important in wordpress themes for sprites
 
relative_assets = true

Notará que el archivo config.rb es muy fácil de entender. Este archivo define dónde viven nuestro CSS, JavaScript, imágenes y Sass dentro de nuestro directorio de proyectos. En nuestra carpeta de temas, el directorio CSS reside en el nivel raíz de nuestro tema. Los archivos Sass residen dentro de la carpeta Sass que creamos anteriormente. Nuestro JavaScript está dentro de una carpeta llamada «js» y así sucesivamente.

Debajo de las primeras cinco líneas hay opciones que puede comentar o descomentar que tienen que ver con la salida del CSS tradicional una vez que se compila nuestro Sass. Normalmente utilizo la opción :nested durante el desarrollo y paso a la opción :compressed cuando mis proyectos pasan a producción para ahorrar tiempo de carga. Utilice la opción que desee.

Hacer que Sass esté atento a las actualizaciones

La mejor parte de un preprocesador es la compilación automática de código CSS. Para que Sass esté atento a las actualizaciones, debemos escribir un comando más en nuestro editor de línea de comandos. Con nuestro tema todo listo para funcionar, escriba:

$ cd /yourproject
$ compass watch

Asegúrese de cambiar la ruta de la línea de comandos a la carpeta de su proyecto de trabajo. Y luego escriba el comando de reloj de brújula como se muestra arriba. Compass observará su carpeta a medida que se creen o cambien nuevos estilos y archivos. A partir de ahí, se genera un nuevo CSS y se compila en nuestro archivo root style.css.

Escribamos algo de Sass

El proceso de configuración de WordPress con Sass y Compass probablemente parezca abrumador hasta ahora, pero le prometo que cuanto más lo haga, más fácil y rápido será con cada sitio que construya. A la larga, ahorrará tiempo escribiendo menos Sass para generar más CSS.

Ahora que estamos todos configurados, estamos listos para escribir algo de Sass.

Para comenzar, abramos el archivo style.css predeterminado en el tema veinticuatro y copiemos el bloque comentado en la parte superior que se ve así:

/*
Theme Name: Twenty Fourteen
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Para facilitar las cosas, simplemente reutilizaré este comentario tal como está, pero lo agregaré en la parte superior de nuestro archivo style.scss dentro de nuestra carpeta sass . También incluiremos Compass, así como el siempre útil restablecimiento de Compass.

Así que ahora nuestro style.scss dentro de nuestra carpeta sass se ve así:

/*
Theme Name: Twenty Fourteen
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
 
@import "compass";
@import "compass/reset";

A partir de aquí, estamos esencialmente listos para darle estilo a nuestro tema. Una cosa a tener en cuenta es que una vez que guarde su archivo style.scss , se generará un nuevo archivo style.css en la raíz de sus temas y se copiará sobre el existente. Esto supone que está comenzando desde cero al rediseñar el tema veinticuatro. Si no desea anular los estilos predeterminados, deberá copiarlos en style.scss para que también se compilen o en un parcial que cubriremos a continuación.

parciales

Soy un gran creyente en la programación basada en módulos. Con esto me refiero a dividir el código en archivos más pequeños y manejables que luego se compilan en un solo archivo. Anteriormente en la publicación mencioné la opción de usar múltiples archivos Sass que luego se generan en un archivo CSS. Estos archivos se conocen como parciales y, por lo general, tienen un prefijo y un carácter de subrayado que se ve como «_parcial.scss» una vez escritos. Para usar parciales, agrego una carpeta titulada _partials dentro de nuestra carpeta sass como se muestra a continuación. Dentro de esa carpeta, he creado varios archivos .scss más pequeños que usaremos en nuestro proyecto. Puede crear tantos como desee siempre que estén incluidos en su archivo principal style.scss .

Nuestra carpeta _partials dentro de nuestra carpeta sass

Cómo usar parciales

Los parciales con el prefijo de subrayado no se compilan en una hoja de estilo adicional. El carácter de subrayado le dice a Sass que este archivo no debe compilarse directamente, por lo que inicialmente lo ignora. Para obtener los estilos dentro de estos archivos en nuestra hoja de estilo, debemos incluir estos archivos en nuestro archivo style.scss . Consulte nuestro archivo style.scss a continuación que indica esto:

/*
Theme Name: Twenty Fourteen
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
 
@import "compass";
@import "compass/reset";
 
// Here we import our partials
@import "_partials/mixins";
@import "_partials/variables";
@import "_partials/typography";

Dentro de cada parcial, he agregado comentarios y algunos Sass básicos:
_mixins.scss

/* mixins.scss */

variables.scss

/*_variables.scss */
/* Body Text Styles */
$text-color: black;
$base-font-size: 16px;
$base-font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
$base-font-weight: 400;

_tipografia.scss

/*_typography.scss*/
body {
color: $text-color;
font-size: $base-font-size;
font-family: $base-font-family;
font-weight: $base-font-weight;
line-height: 1.6;
}

Como Compass está observando nuestro proyecto y hemos incluido nuestros parciales en nuestro archivo principal style.scss Sass, tomará estos cambios y generará un nuevo archivo style.css una vez que guarde cada uno de estos archivos. Ahora nuestro archivo style.css se ve así:

estilo.css

/*
Theme Name: Twenty Fourteen
Theme URI: http://wordpress.org/themes/twentyfourteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: In 2014, our default theme lets you create a responsive magazine website with a sleek, modern design. Feature your favorite homepage content in either a grid or a slider. Use the three widget areas to customize your website, and change your content's layout with a full-width page template and a contributor page to show off your authors. Creating a magazine website with WordPress has never been easier.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: twentyfourteen
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
 
/* line 17, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
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: inherit;
font-size: 100%;
vertical-align: baseline; }
 
/* line 22, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
html {
line-height: 1; }
 
/* line 24, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
ol, ul {
 
list-style: none; }
 
/* line 26, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
table {
border-collapse: collapse;
border-spacing: 0; }
 
/* line 28, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }
 
/* line 30, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
quotes: none; }
 
/* line 103, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }
 
/* line 32, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
a img {
border: none; }
 
/* line 116, ../../../../../../../Library/Ruby/Gems/2.0.0/gems/compass-0.12.6/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
display: block; }
 
/* _mixins.scss */
 
/* _variables.scss  */
 
/* _typography.scss */
 
/* line 3, sass/_partials/_typography.scss */
 
body {
color: black;
font-size: 16px;
font-family: "HelveticaNeue", Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.6; }

Nuestro código ahora se ha convertido en un único archivo CSS, lo que significa que hemos instalado con éxito un tema de WordPress con un flujo de trabajo de Sass & Compass en funcionamiento. ¡Felicidades por haber llegado tan lejos!

Nuestro tema twentyfourteen reseteado con Sass y listo para personalizar a nuestro gusto.

Dado que hemos anulado nuestros estilos de tema predeterminados para el tema veinticuatro, nuestro tema ahora se ve un poco simple, ¡pero está listo para personalizarse con Sass!

Evite la línea de comandos

Han surgido muchas aplicaciones populares y ejecutores de tareas para los usuarios de Sass o Less. Estas aplicaciones compilan código y muchas otras cosas, como la actualización del navegador, la minimización de código, la optimización de imágenes, el mapeo de fuentes y más. Algunas de estas aplicaciones y ejecutores de tareas se enumeran a continuación. Con estos, puede colocar su proyecto directamente o configurarlo en poco tiempo para realizar toneladas de tareas en su proyecto a la vez. Todas estas operaciones que ocurren a la vez es una gran razón por la que son un poco más fáciles que la línea de comandos.

Gruñido
Trago
Kit de código
Mezcla
preprofesionales
Explorar
Coala
En vivoRecargar

Control de versiones

Quería hablar brevemente sobre el control de versiones y el uso de Git con un proyecto Sass como el nuestro. Git es una herramienta poderosa que nos ayuda a mantener un historial de nuestro trabajo en caso de que hagamos algo como romper nuestro código o integrar código nuevo para una nueva versión. Al usar Sass, se generan algunas carpetas y archivos nuevos que no siempre necesitan ser versionados con Git. La carpeta .sass-cache o la carpeta sass, por ejemplo, no está destinada a usarse en un servidor en vivo una vez en producción. Al final, el archivo que importa sigue siendo ese archivo style.css en nuestro directorio raíz de nuestro tema. El resto lo puedes versionar como quieras, especialmente si trabajas en equipo. Ya sea para una copia de seguridad o simplemente para su tranquilidad, elija lo que funcione mejor para usted o su equipo.

Conclusión

WordPress, Sass y Compass pueden ser un trío poderoso cuando se fusionan como lo hemos hecho nosotros. Si bien la mayoría de los recién llegados a Sass tienden a fruncir el ceño ante todo el trabajo adicional y la configuración, creo que una vez que se sumergen y realmente comprenden los beneficios de usar el lenguaje, quedarán enganchados para siempre. Cambiar de nuevo a CSS regular se sentirá mucho más desalentador que antes. ¡Confía en mí!

Si todavía eres nuevo en Sass, te animo a que lo pruebes. Consulte la guía en http://sass-lang.com/ para obtener un curso intensivo sobre la comprensión del idioma. Si puede escribir CSS, puede escribir Sass.

Esperamos que este tutorial brinde a cualquiera que use Sass una mejor comprensión de cómo combinarlo con WordPress y lo ayude a crear o editar su tema de manera más eficiente que nunca.

Imagen en miniatura del artículo por Tomnamon / shutterstock.com