Vamos a configurar un flujo de trabajo de desarrollo funcional para trabajar con Sass cuando desarrolles temas de WordPress. ¿Por qué Sass, y no otro preprocesador o postprocesador de CSS? Bueno, ya que trabajamos con WordPress, es una buena idea usar el preprocesador CSS utilizado por el núcleo de WordPress, y eso es Sass. Sass es un lenguaje de extensión CSS que nos permite escribir archivos SCSS con capacidades extendidas como variables, combinaciones y anidamientos, que luego se procesan en CSS normal.
Para que cualquier flujo de trabajo de desarrollo funcione con Sass, debe procesar sus archivos SCSS a través de Sass en CSS normal. Hay varias herramientas diferentes disponibles para hacer esto. Algunos son independientes, mientras que otros son parte de una aplicación más grande. Desde mi perspectiva, el objetivo de todos los flujos de trabajo debe ser convertir cualquier tipo de preprocesamiento u otra tarea en segundo plano, en un evento automatizado que simplemente sucede entre bambalinas sin que tengas que monitorearlo constantemente. Se utiliza «Grunt«, para automatizar el procesamiento previo de Sass y algunas otras tareas.
En la comunidad de WordPress, Grunt es el procesador de tareas más comúnmente utilizado, por lo que aprender a usarlo le brindará un acceso más fácil a la comunidad en general. Una vez configurado, Grunt manejará todas las tareas en segundo plano, por lo que todo lo que tiene que preocuparse es escribir el propio Sass. El resto pasará entre bambalinas. Con esto en mente, este tutorial se divide de la siguiente manera: Se establecerá un entorno de desarrollo, identificando para qué vamos a utilizar Sass y entendiendo cómo Grunt nos ayudará en el camino.
Después te mostraré cómo configurar Grunt, Sass y un autoprefijador en Mac. Grunt es un automatizador de tareas de línea de comandos que se basa en la plataforma Node.js, mientras que Sass es una aplicación Ruby. Y finalmente, veremos el flujo de trabajo de usar Sass en el desarrollo de un nuevo tema. Trabajaremos con el popular tema de inicio underscores, y te mostraré cómo configurar Grunt, Sass y Autoprefixer en el proyecto para que todo funcione sin problemas y de forma automática.
Configurar un entorno de desarrollo
Para implementar el flujo de trabajo necesitas un entorno de desarrollo local en su computadora. La forma más simple de un entorno de desarrollo local consiste en una instalación local de WordPress, un editor de código y un navegador con herramientas de desarrollo.
También es aconsejable adoptar un sistema de control de versiones como Gits, para proporcionar entornos de desarrollo históricos, ramificados y más flexibles. Para comenzar, necesitas configurar WordPress para que se ejecute localmente en tu computadora. Esto es para que pueda trabajar directamente con los archivos sin tener que enviarlos a un servidor remoto y para que el trabajo que haga no esté disponible para nadie más hasta que esté listo. El proceso de instalación y ejecución de WordPress en su computadora implica configurar una aplicación que convierta tu computadora en un servidor web y luego instalar WordPress en ese servidor web.
Para trabajar en Mac, te recomiendo instalar y ejecutar WordPress en MAMP. Con WordPress configurado y en funcionamiento, necesitas un editor de código. Para este nivel de desarrollo, recomiendo un editor avanzado como Sublime Text o, más preferiblemente, un IDE a escala completa, como Netbeans o PhpStorm. Personalmente uso Netbeans, pero muchos desarrolladores de WordPress confían en Sublime Text, Coda o PhpStorm.
En este curso específicamente, usaré Brackets. Con su entorno de desarrollo configurado y conectado, estás listo para comenzar a trabajar con WordPress y Sass.
Usando Sass
Sass es un lenguaje de extensión para CSS que le permite escribir CSS utilizando herramientas como variables, anidamiento, parciales, mixins y operadores. De estos, diría que las variables y las combinaciones son las herramientas con el impacto más inmediato y visible en comparación con la escritura de CSS estándar. En lugar de escribir una compleja serie de código una y otra vez, haces una declaración de familia de fuentes, o el marcado de prefijo del navegador para el radio de borde. Puedes crear una variable o mezcla, luego simplemente proporcionas la variable o el nombre de la mezcla y los valores, y Sass emitirá el marcado correcto automáticamente.
Existe una herramienta, llamada Autoprefixer. Autoprefixer encuentra cualquier propiedad de CSS3 que actualmente necesite el prefijo del proveedor y los agrega después de que se haya procesado el CSS.
Entonces, mientras que Sass es una extensión de preprocesamiento que produce CSS, Autoprefixer es una extensión de postprocesamiento que cambia el CSS antes de que se publique.
Usar Grunt como un automatizador de tareas
El mayor desafío con el uso de Sass es que una vez que hayas creado tus archivos SCSS, debes ejecutarlos a través de Sass para obtener el CSS funcional adecuado. Ahora puedes hacer esto manualmente, crear o cambiar un archivo SCSS, luego ejecutar el preprocesador Sass para generar CSS. Y luego, si desea prefijos de proveedores, también ejecutará Autoprefixer posteriormente.
Como dije anteriormente, Grunt es el automatizador de tareas más comúnmente usado en la comunidad de WordPress. Y tiene un gran soporte para Sass, Autoprefixer y muchas otras herramientas que son útiles para los diseñadores y desarrolladores de temas de WordPress. Grunt es una aplicación de ejecución de tareas de Javascript que se ejecuta en línea de comandos y realiza automáticamente tareas comunes o repetitivas. Los usos comunes de Grunt incluyen la eliminación de errores y la reducción de archivos Javascript.
En términos simples, así es cómo funciona. Se le dice a Grunt que observe una carpeta para cualquier cambio. Cuando se produce un cambio, lo que significa que guarda un archivo, se activa una tarea Grunt. Esta tarea puede ser cualquier cosa que desee, y en nuestro caso, será primero encontrar cualquier archivo SCSS y usar Sass para preprocesarlos en CSS. Luego tomamos esos archivos CSS y usamos Autoprefixer para postprocesarlos para tener prefijos de proveedores cuando sea necesario. Con la ayuda de Grunt, todo esto sucederá automáticamente, lo que le permitirá escribir archivos SCSS y los resultados serán limpios y estarán correctamente marcados en CSS.
Instalar Grunt-cli, linea de comandos y Sass
En Mac viene preinstalado Node.js y Ruby, por lo que el proceso comienza configurando Grunt y Sass directamente.
Todo esto se hace a través de la línea de comando.
Así que primero tengo que hacer es abrir mi terminal. No importa en qué carpeta estoy ahora. Quiero instalar versiones globales de grunt-cli y Sass, para poder usarlas desde cualquier carpeta de mi computadora. Ahora bien, si esta es la primera vez que instalas algo a través de la línea de comandos, lo más probable es que tengas que darte permisos para hacerlo.
Esto se hace ejecutando este comando simple, sudo chown, así que cambie el propietario, -R luego $USER, de modo que ese será el usuario actual registrado y luego la carpeta /user/local. Esto cambia de forma recursiva el propietario de la carpeta local del usuario al usuario que ha iniciado sesión actualmente para que pueda ejecutar el administrador de paquetes de nodos o npm y también gemas de Ruby. Cuando ejecute este comando por primera vez, es muy probable que tenga que ingresar su contraseña.
sudo chown -R $USER /usr/local
Ahora que tengo acceso, puedo comenzar instalando el grunt-cli o la interfaz de línea de comandos. Notará que aquí estoy instalando la interfaz de línea de comandos y no Grunt en sí, y esto es muy deliberado. Quiero instalar Grunt en cada proyecto para poder controlar con detalle qué sucede exactamente. Solo instalo la interfaz de línea de comandos de grunt globalmente en mi computadora para que sea accesible en todas partes. Y eso es para que tenga control total y pueda hacer todo lo que quiera en la carpeta que desee.
Para instalar la interfaz de línea de comandos de grunt, escribiré npm, administrador de paquetes de nodos, instalaré y luego diré -g para global grunt-cli. Cuando ejecute, la línea de comandos buscará en Internet, encontrará la última versión de grunt-cli, la descargaré e instalaré en mi computadora. Y si todo funciona correctamente, recibiré un mensaje que me dice que ahora está instalado.
npm install -g grunt-cli
El siguiente paso es instalar Sass. Ahora Sass es una aplicación de Ruby, así que tengo que usar una gema de Ruby para instalarla.
Sin embargo, si tecleo
gem install sass
, aparecerá un mensaje de error que dice que no está funcionando. Así que aquí tengo que usar el sudo comando otra vez. Ahora, si no estás familiarizado con la línea de comandos o la interfaz de Unix, sudo básicamente te otorga superpoderes para que puedas hacer lo que quieras. Y normalmente nunca recomendaría usar sudo para nada, porque es bastante peligroso, pero en este caso, para instalar Sass, en realidad está bien. Así que escribe
sudo gema install sass
Pulsa enter.
La línea de comandos busca en Internet, encuentra Sass, lo descarga, lo procesa y lo instala en la computadora. Una vez que todo esté listo, verá que dice:
1 gem installed
Y eso significa que ahora tenemos el grunt-cli y Sass instalados y funcionando en nuestras computadoras y podemos comenzar a configurar todo.
Construir un simple proyecto de prueba
Antes de profundizar en el flujo de trabajo de Sass, Grunt y WordPress, es importante asegurarse de que lo que hemos configurado hasta ahora funciona correctamente. Y para eso vamos a utilizar un proyecto de prueba.
Aquí encontrarás una carpeta llamada sass tests. Dentro de esta carpeta solo hay un archivo, gruntfile.js, y también hay una carpeta llamada SCSS que tiene tres archivos SCSS. Ahora vamos a trabajar con estos archivos para probar si podemos conseguir que Grunt compile Sass.
Y aquí tenemos que usar un editor de código. Como dije antes, voy a usar Brackets como mi editor de código en este curso, pero puedes usar el editor de código que quieras. No voy a hablar sobre el archivo Grunt todavía, lo trataremos más adelante. Así que por ahora veamos estos archivos SCSS. Estos son los archivos que contienen el código Sass que se compilará en CSS regular.
Y puedes ver que hay algo de estructura aquí. Tengo este archivo principal llamado style.scss y solo contiene estos en las llamadas de importación a los otros archivos. Este es el archivo maestro que estoy usando para enumerar qué archivos de Sass quiero compilar y en qué orden. El archivo _mixins.scss contiene en mi caso solo variables. Y el archivo _main.scss contiene una lista de diferentes reglas CSS que usan la sintaxis de Sass.
Ya tenemos el proyecto y ahora necesitamos iniciar los proyectos para que Grunt pueda comenzar a monitorear.
Y el primer paso en ese proceso es configurar algunos parámetros para el proyecto en sí en la terminal. Me sitúo en la carpeta en la que tengo mi proyecto, la carpeta sass-test. Aquí tengo el archivo Grunt y las carpetas SCSS, eso significa que estoy en el lugar correcto. Ahora voy a inicializar los proyectos.
Así que quiero que presten mucha atención a lo que sucede aquí en Brackets cuando hago esto. Voy a escribir en la terminal
npm init
Esto iniciará una utilidad que nos ayudará a configurar un nuevo proyecto npm. Y empieza preguntándome cuál es el nombre de los proyectos, ‘sass test’ está bien, así que solo presiono Enter. El número de versión, no hace falta que ponga nada, escribo una descripción. Puntos de entrada, diré index.html, aunque no tenga uno.
Test command, nada. Sin repositorio, sin palabras clave. Pongo mi nombre aquí, y no hay licencia. Luego obtengo una vista previa de cómo se verá el archivo. Digo que sí, está bien.
MacBook-Pro-de-Amparo:sass-test amparo$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (sass-test)
version: (1.0.0)
description: Prueba Sass
entry point: (Gruntfile.js)
test command:
git repository:
keywords:
author: Amparo Megías
license: (ISC)
About to write to /Users/amparo/Documents/sass-grunt/sass-test/package.json:
{
"name": "sass-test",
"version": "1.0.0",
"description": "Prueba Sass",
"main": "Gruntfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Amparo Megías",
"license": "ISC"
}
Is this OK? (yes) yesAhora tengo un nuevo archivo llamado package.json que tiene toda esa información. Vamos a limpiarlo un poco, puedo quitar la licencia y la coma al final.
{
"name": "sass-test",
"version": "1.0.0",
"description": "Prueba Sass",
"main": "Gruntfile.js",
"author": "Amparo Megías"
}Así que este archivo ahora configura los parámetros para mi proyecto. Verás más adelante, que una vez que comencemos a definir qué paquetes queremos usar para este proyecto Grunt en particular, también se enumerarán en este archivo package.json. Pero eso es para más tarde. Por ahora sabemos que tenemos el proyecto configurado y vemos que tenemos nuestros archivos Sass, nuestro archivo Grunt y nuestro archivo package.json. Y si se está preguntando por qué no hay un archivo index.html aquí, en nuestro caso, para esta prueba, no es realmente necesario porque todo lo que estamos probando es si podemos convertir estos archivos SCSS a CSS normal. Y el archivo de índice no es realmente relevante en este punto.
Ejecutar Grunt y Sass por primera vez
Hasta ahora tengo configurado mi proyecto de prueba de sass y he creado package.json que define los parámetros del proyecto.
Ahora necesito comenzar a planificar lo que quiero que Grunt haga con mi proyecto de prueba. Quiero que Sass pueda entrar y tomar todos los archivos de la carpeta SCSS y convertirlos en un solo archivo CSS, para poder mostrar ese contenido en un navegador normal. Además, quiero ejecutar otra tarea que vigile esta carpeta SCSS para detectar cualquier tipo de cambio en cualquiera de los contenidos que contiene.
Y siempre que haya un cambio quiero que Grunt ejecute automáticamente la tarea Sass nuevamente y compile una nueva versión del archivo CSS. Sabiendo esto, puedo ver que tengo tres paquetes que debo instalar en mi proyecto.
Ttodo esto se agrega a través de la línea de comandos. En la Terminal, estoy en la carpeta sass-test. Luego usaré el administrador de paquetes de node para instalar los diferentes paquetes que necesito para este proyecto en particular.
Así que empezaré instalando el paquete Sass. Así que escribiré
npm install grunt-contrib-sass --save-dev
Así que esta última parte aquí, –save-dev significa que solo instalaré grunt-contrib-sass dentro de este proyecto en particular.
Así que ahora puedo ejecutar esta función. Recibo un par de mensajes de error que indican que el archivo de mi paquete no está completo porque me faltan algunos puntos de referencia. Eso es completamente irrelevante para nuestro proyecto. Si ahora vuelvo a package.json, veré que algo ha cambiado. Ahora tengo este código adicional que dice devDependencies, grunt y grunt-contrib-sass.
Y estos son los dos nuevos paquetes de los que depende este proyecto. Lo que significa que si no existen en el proyecto, el proyecto no se ejecutará. Así que el primero es Grunt, que en realidad no instalamos, pero npm es lo suficientemente inteligente como para saber que si quieres Grunt-Contrib-Sass también necesitas Grunt, así que se instalaron ambos. El segundo es grunt-contrib-sass. Y si agregamos más paquetes, todos se enumerarán aquí en el archivo package.json. También verá que ahora tenemos una nueva carpeta llamada node_modules.
Y dentro de esa carpeta ahora tenemos grunt y grunt-contrib-sass. Así que estos son los dos paquetes reales que acabamos de instalar.
Ahora tengo que agregar un paquete más.
npm install grunt-contrib-watch –save-dev
Este es el paquete que mira el contenido. Nuevamente las mismas advertencias de que mi archivo de paquete no está completo. Y luego se instala el paquete de observación.
Y ahora veremos este archivo llamado Gruntfile.js del que no hemos hablado hasta ahora.
Donde dice Sass, configuramos la primera tarea que Grunt ejecutará. Lo llamamos sass, y en mi caso también llamé a dev, así que puedo configurar múltiples tareas sass. Y dentro de esta tarea, señalo que deseo crear una hoja de estilo que se expande, lo que significa que es legible para los humanos. No quiero tener un mapa de origen, sería un archivo que me dice de dónde viene todo. Y lo que quiero hacer es con el archivo que está dentro de la carpeta scss llamada style.scss hacer algo.
Entonces a continuación tengo una tarea separada llamada watch. Todo lo que hace es mirar cualquier cosa dentro de una carpeta que tenga el sufijo .scss y ejecute la tarea sass en esos elementos. Eso significa que cada vez que le suceda algo a cualquiera de los archivos dentro de esta carpeta que tiene el sufijo o la extensión .scss, la tarea de sass se ejecutará y todo se compilará en el archivo style.css.
En la parte inferior también enumeramos las tareas reales que necesitamos aquí, lo que serían los paquetes. Aquí puedes ver grunt-contrib-sass, y grunt-contrib-watch. Bien, este es el archivo Grunt que le dice al proyecto qué hacer. Ya está precompilado y ahora que he configurado todos mis módulos y todo está en su lugar en mi archivo de paquete, esto debería funcionar. Y aquí es donde ves que sucede algo mágico, Grunt y Sass trabajan juntos para crear un nuevo CSS para ti. Ahora tenemos que iniciar Grunt, simplemente tecleo grunt y pulso enter.
Y si miramos aquí, verás que la tarea de observación es monitorear todos los archivos con la extensión .scss, eso significa que si entro en _main.scss y agrego una línea adicional a este comentario en la parte superior, luego grabo el fichero, se compila, se ejecuta la tarea sass dev, luego se creará un nuevo archivo llamado style.css, en el que se reflejan las modificaciones.
Deja una respuesta