Alex Plaza

UX & Front-end Developer

Compilando Sass en tu Equipo

Para todos los que quedaron enganchados con las ventajas de Sass, que revisamos antes, es hora de que sepan como compilar Sass en sus equipos para comenzar a desarrollar proyectos de forma local.

La Terminal

Primero que todo y como diseñador se los digo: la terminal(o consola) es su amiga. No tienen porque tenerle miedo a esta tremenda herramienta. Tampoco puedo culparlos, por mucho tiempo huí de ella por miedo a sus símbolos y comandos desconocidos, pero la verdad es que muy simple utilizarla y es mucho el beneficio productivo que trae consigo.

Sin hacer más énfasis en las maravillas que puedes hacer en la consola, ¡vayamos al grano!

Si estás trabajando en un Mac es tu día de suerte, porque OS X viene con Ruby pre-instalado por lo que para usar Sass de forma local simplemente tendrás que correr el siguiente comando: gem install Sass y ¡listo!

Para los que trabajen en Linux imagino que ya son expertos en la consola y no les costará nada instalar Ruby y la gema de Sass. Si trabajan con un Windows, pues que dios se apiade de sus almas. Nah, aquí tienen un Instalador de Ruby

Para comprobar si ya tienen la gema de Sass instalada pueden correr el siguiente comando en su Terminal sass -v al momento que escribo este post mi versión es Sass 3.4.2 (Selective Steve). La de ustedes puede ser distinta, pero si cuentan con una versión anterior a la 3.3 les recomendaría que actualizaran su gema corriendo el comando gem update sass.

Recuerda que para ejecutar cada comando que escribimos tienes que darle a la tecla Enter.

Note: Here is an excelent tutorial about the Mac OSX Terminal. Yep, is in english.

Perdiéndole el miedo a la Terminal

Bueno, ahora que tenemos nuestra gema de Sass instalada y es hora de que la pongamos a hacer guardia. Tenemos que hacer que la gema observe nuestros archivos .scss para que con cada modificación que realicemos en ellos, nos genere una nueva compilación en nuestro archivo .css.

Veámoslo en acción!

Terminal

Lo que haremos primero con la consola es dirigiremos a la carpeta donde crearemos nuestro mini, nano, proyecto. Usamos el comando cd Desktop que quiere decir “Change Directory to Desktop” para llegar hasta allí y luego usamos mkdir sasstut que quiere decir “MaKe a DIRectory called sasstut”, con este último estamos creando una nueva carpeta con el nombre de nuestro proyecto.

Luego volvemos a usar cd o Change Directory para ir dentro de la carpeta que acabamos de crear cd sasstut. Ya adentro, lo que hacemos es crear un nuevo archivo usando el comando touch en este caso creamos nuestro archivo SCSS con touch app.scss.

Nota: Estoy utilizando zsh en mi terminal, por eso tiene colores para facilitar la lectura de los que está pasando. Si desean instalarlo háganlo Via Curl, con el comando que aparece aquí

The Sass Night Watch

Bueno, ahora que tenemos nuestro pequeño proyecto creado y nuestra gema de Sass instalada, es hora de que pongamos a Sass a hacer guardia. Tenemos que hacer que la gema observe nuestros archivos .scss para que con cada modificación que realicemos en ellos, nos genere una nueva compilación en nuestro archivo .css.

Lo vemos y luego lo analizamos

Terminal haciendo correr la gema de Sass

Estábamos en sasstut pero para que Sass observe la carpeta completa necesitamos volver una carpeta atrás y luego indicarle a la gema que queremos observar una carpeta que se encuentra en nuestro Escritorio. Entonces tenemos que usar el comando cd .. y esto nos llevará un directorio atrás.

Ya, ahora ponemos a trabajar a la gema, ejecutando sass --watch sasstut. Automáticamente Sass nos creará 2 archivos, un archivo app.css que es el output de nuestro app.scss y otro archivo app.css.map este último es una feature más reciente de Sass que revisaremos más adelante, y no afecta en nada nuestro objetivo actual, ignórenlo por ahora.

Estamos listos, ahora es cosa de que comencemos a trabajar nuestro archivo app.scss y que demos Cmd+ S o Guardar, para que Sass preprocese nuestro SCSS y nos entregue un nuevo archivo app.css.

Veamos un pequeño ejemplo de como se comporta la Guardia de la Gema cuando editamos nuestros archivos SCSS.

Nota: Se alargó un poco el pequeño ejemplo y terminó siendo demasiado peso para un gif, así que lo pasé a youtube

Eso es todo por ahora, super simple! Estoy pensando en realizar un video tutorial más completo de como compilar un proyecto de Sass más complejo con grunt y/o con Ruby, pero tengo que practicar mi desplante en cámara y conseguir un lugar adecuado para grabar. Cualquier consulta déjenla en los comentarios.

comments powered by Disqus