Si bien ya expliqué como instalar y configurar todo lo necesario para poder usar LESS con Netbeans en este post, hoy le toca el turno a su rival SASS (Syntactically Awesome Style Sheets), y de la misma forma empezaremos viendo un poco de qué va la cosa y de qué ventajas podemos disfrutar si lo usamos.
Si has leído la entrada sobre cómo configurar Less, todo lo que diga ahora te va a sonar repetido, pero es que SASS y LESS son casi hermanos, sirven para lo mismo y tienen casi las mismas características. Aunque al parecer SASS puede llegar a ser un poco más potente en ciertas cosas, es muy probable que nunca necesites de «tanta potencia» en tus proyectos. Si tienes que elegir entre los dos, hay un consejo que se repite a lo largo de toda la red: «Si vas a empezar a usar uno elige SASS, pero si ya conoces LESS no hace falta que te cambies»
Empecemos, SASS es un lenguaje de hojas de estilo. Aunque el estandar para esto es el CSS, SASS permite hacer muchas más cosas (como definir variables, funciones o condicionales), es mucho más limpio y además facilita la reutilización de código entre proyectos. Sin embargo SASS no es algo que los navegadores sean capaces de leer directamente, así que antes de subirlo a tu servidor, tendrás que convertirlo (compilarlo) a CSS. Para eso necesitas un preprocesador, y además sería perfecto tenerlo configurado de manera que cada vez que hagas cambios en tu código, se genere el nuevo CSS de manera automática. Eso es lo que vamos a hacer ahora para el ID Netbeans.
1.- Descargar e instalar Ruby on Rails
El programa que compila el código de LESS a CSS está escrito en Ruby, así que necesitas instalarlo. Si ya lo tienes instalado, bien, y si no, puedes ir a la Web oficial de Ruby on Rails.
Te preguntará la carpeta de instalación, puedes dejar la que sale por defecto o poner la que tu prefieras. Yo seguiré las instrucciones como si la carpeta elegida fuese «c:\Ruby22«. Los checkbox que aparecen debajo los puedes marcar si quieres, si pones el ratón encima te explica para qué son. Yo no he marcado nada.
2.- Instalar SASS usando RubyGem
Ruby utiliza un gestor de paquetes que se llama RubyGem que es el que vamos a usar para instalar SASS. Para eso tienes que ir a la carpeta donde has instalado Ruby, entrar en la carpeta «bin» y ejecutar la siguiente línea: (puede tardar unos segundos en empezar a hacer algo, paciencia)
gem install sass
3.- Comprobar que está todo bien
Con lo anterior se habrán creado una serie de archivos dentro de la carpeta «bin» de Ruby, vamos a ver si todo funciona ejecutando el comando que nos dice qué versión tenemos de SASS:
sass -v
Nota: Estamos haciendo las cosas en plan simple y rápido, porque nuestro objetivo principal es conseguir que todo funcione. Si sabes lo que estás haciendo, es posible que quieras tenerlo todo un poco más ordenado.
4.- Configuración general de Netbeans
En el menú, ve a Tools > Options > Miscellaneous > CSS Preprocessors.
En el apartado dedicado a SASS tenemos que poner la ruta a donde lo hemos instalado que es la carpeta «c:\Ruby22\bin\sass.bat» (si has usado otra carpeta para instalar, pon la tuya). También puedes usar el botón Browse para buscar el archivo sass.bat.
5.- Señalar en qué proyecto quieres usar SASS
Haz click derecho en el proyecto en el que quieras usar SASS y pulsa en propiedades. Ve a la sección de CSS Preprocessors y te saldrá las pestañas de SASS y LESS. En la de SASS activa la casilla de «Compile Sass Files on Save» y pon bien las carpetas si hace falta. Aplica los cambios y dale a «Ok»
Nota: cuidado con las distinciones entre SASS y SCSS
Hemos acabado, a partir de ahora cuando guardes algún archivo de la carpeta de archivos SASS de tu proyecto, se compilarán a archivos CSS y se guardarán en la carpeta de CSS.
