Cómo instalar Sass
En el artículo que publicamos recientemente sobre Sass, veíamos qué era y qué sintaxis tenía. Descubríamos sus principales características, que lo hacen destacable en la comunidad de desarrolladores y lo prefieren frente otros preprocesadores CSS, como Less o Stylus. Ahora que ya lo conocemos mejor, a continuación veremos cómo instalar Sass, muy relacionado con el Cloud Computing, y empezar a utilizarlo. Antes de instalar Saas, hay que saber que existen dos alternativas básicas para usarlo:
- Preprocesar con herramientas de interfaz gráfica, por ejemplo Prepros, CodeKit o Scout-App. Con esto, trabajar es más sencillo y podemos prescindir de la línea de comandos, aunque es necesario utilizar un programa en concreto y con la desventaja de que sea de pago.
- Usar la línea de comandos para preprocesar. Es la que utilizan la mayoría de desarrolladores. No requiere ningún tipo de licencia, el terminal se encuentra en nuestro sistema operativo y nos deja personalizar todo el comportamiento del preprocesador.
Instalar Sass
Su instalación dependerá del sistema operativo que estemos utilizando, aunque lo primero que tenemos que hacer es alojar Ruby en nuestro ordenador, ya que el compilador de Sass está escrito en este lenguaje de programación. ¿Dónde puedes conseguir Ruby en función de tu sistema operativo?
- Windows. en este enlace encontrarás el instalador para Windows.
- Linux. A través del gestor de paquetes de la distribución que tengas instalada, apt-get, yum, etc.
- Mac. Viene ya instalada y no necesitarás nada más.
Cuando lo tengamos instalado, tendremos el comando gem, que instala paquetes basados en Ruby. Lo usaremos para instalar Sass, pero hay diferencias entre los distintos sistemas operativos, como ejemplificamos a continuación:
-
Windows. Abrimos un terminal, por ejemplo el que viene por defecto, con “cmd” y lanzamos el comando.
gem install sass
-
Linux. Usamos el terminal y tecleamos el comando.
sudo gem install sass --no-user-install
-
Mac OS X. Utilizarás generalmente sudo. Ojo con los permisos.
sudo gem install sass
Una vez instalado Sass, comprobaremos si está disponible con el comando:
sass -v
Si nos devuelve la versión, lo tendremos instalado.
Compilar archivos de Sass a CSS
Para compilar el código Sass y convertirlo a CSS estándar, te debes situar con el terminal en la carpeta donde esté el archivo con el código SCSS. A continuación, lanzas el siguiente comando (archivo origen-archivo destino):
sass ej.scss ej-compilado.css
Observarás que después de su ejecución, crea un archivo adicional llamado ej-compilado.css.map y que nos sirve para que el navegador nos ayude a la hora de depurar.
Compilar Sass de manera automática con un watcher
Compilar Sass es muy rápido, pero ¿qué pasa si cambias tu código cada poco? Por suerte, podemos automatizar el proceso con un watcher, que no es más que el encargado de vigilar tu código cada vez que se guarda y que se compila al instante. De este modo, ahorras tiempo entre compilación y compilación.
Hay que indicar también que el watcher nos permite observar un único archivo o todos los de una carpeta.
Vigilar las modificaciones de un archivo en concreto
Se consigue aplicando la opción –watch, con un archivo origen y otro destino. Como este ejemplo:
sass --watch origen.scss destino.css
Vigilar todos los archivos de una carpeta
Indicando la carpeta origen y destino, como en el siguiente ejemplo, podremos vigilar todos los archivos de una carpeta.
sass --watch carpetaorigen:carpetadestino
Nuestra sugerencia es crear dos carpetas. Una que se llame «sass» en la que pondrás el código fuente con archivos de extensión «.scss» y otra que puedes llamar «css», donde pondremos el código compilado.
Echa un vistazo a este esquema:
Con el siguiente comando, lanzarás el watcher.
sass --watch sass:css
Creado el código SCSS en la carpeta sass, los archivos compilados se irán almacenando en la carpeta de destino. La estructura quedaría de la siguiente manera:
Watcher también podría evitar la compilación de ciertos archivos, simplemente nombrándolos al principio con un guión bajo. Algo como _variables.css.
Usar los archivos de código generado
Como el código SCSS no es compatible con los navegadores, tendremos que enlazar el generado en el index.html de esta forma:
<link rel='stylesheet' href='css/estilo.css'>
Si todo es correcto, verás cómo funciona perfectamente.
Con lo que hemos visto, ya puedes iniciarte en el uso de Sass. Hemos creado un entorno de desarrollo amigable que permite una compilación de manera automática. Tan solo queda practicar el lenguaje para sacarle el máximo provecho en nuestros desarrollos.
Ahora que sabes cómo instalar Sass y has aprendido a usarlo, estar más cerca de ser un maestro del Cloud Computing.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.