Curso de Sass: Introducción

SassEl uso de Sass es, junto al diseño web adaptativo, lo mejor que me ha pasado desde el punto de vista del desarrollo web en los últimos tiempos. Empezar con Sass da un poco de respeto al principio… hasta que lo empiezas a usar. Es ese tipo de cosas que luego ya no sueltas nunca (o hasta que salga algo mejor, claro).

El objetivo de este curso será aprender a usar Sass empezando de cero. No sé aún cuantos artículos haré, pero unos cuantos…. Intentaré que tengan la menor distancia en el tiempo entre uno y otro… espero conseguirlo a pesar de la carga de trabajo que tengo habitualmente.

Y como no podía ser de otra forma, empezamos con un artículo de Introducción a Sass, donde veremos qué es, cómo se instala y por qué es tan útil.

Qué es Sass

Sass significa “Syntactically Awesome Stylesheets”. Podemos definirlo como CSS con muchísimas características añadidas que suplen muchas de sus carencias (como el uso de variables, por ejemplo).
Pero lo más importante es que los archivos en Sass no son los archivos CSS definitivos, sino que hay que “pre-compilarlos”. Básicamente el esquema sería algo así:

Sass
Partimos de uno (o varios) archivos Sass que una vez pre-compilados (preprocessor) obtenemos uno o varios archivos CSS.

Quizás todo este lío de pre-compilar más la instalación (ya que Sass se basa en Rails) es lo que echa más atrás al principio, pero veréis que es todo muy sencillo.

¿Por qué es útil Sass?

Normalmente crear una hoja de estilos es relativamente sencillo. Lo malo es cuando el proyecto va creciendo en tamaño: su CSS puede acabar siendo muy difícil de manejar, con todas sus variaciones de colores, tipos de letras, números en todo tipo de propiedades, distintas hojas de estilo, repetición de código, etc.. Todos sabemos lo que es eso…

Sass nos permite una sintaxis más simple, más elegante, implementando además bastantes características extra para hacer más manejable nuestra hoja de estilos.

¿Cómo es un archivo Sass?

A primera vista no es muy diferente de un archivo CSS. Normalmente tiene la extensión .scss (también puede tener la extensión .sass pero es menos utilizado). Un ejemplo:

Sass compilando
Vemos el archivo original .scss y a su derecha el archivo final .css

Como puedes ver a la izquierda, el archivo .scss comienza con la definición de dos variables ($main y $enlaces) a las que le asignamos un color a cada una y que luego usamos más abajo. Luego a continuación fíjate cómo está anidado el código y lo que genera una vez compilado en CSS.

Un archivo normal CSS es perfectamente válido como archivo SCSS, por lo que al principio puedes empezar creando estilos normalmente como lo haces siempre, y luego vas añadiendo nuevas técnicas de Sass a medida que las vas aprendiendo.

Instalando Sass

Como vamos a empezar con ejemplos tenemos que tener Sass instalado. El proceso de instalación varía si tienes un Mac o un PC, al tener los Mac ya instalado Ruby.

Instalación en Widows

Los usuarios de Windows tienen que instalar por lo tanto Ruby. Lo pueden instalar usando su instalador para Windows.

Descargamos el instalador de Ruby más reciente:

Instalador de Ruby para Windows

Al instalar saldrá una pantalla con varias opciones. Activa la opción central para que no te salga el error “gem no se reconoce como un comando interno o externo” al instalar Sass.

Instalando Ruby en Windows 2

Ahora que ya tienes Ruby instalado necesitarás instalar Sass. También puedes ir por la vía facil e instalar un programa como Prepos, que ya trae Sass y Compass instalados (si eres como yo irás por esa ruta…)

Si de todas formas quieres instalar Sass haz lo siguiente:

Inicio–>Todos los programas–>Accesorios, después selecciona “Símbolo del Sistema”.

A continuación, para instalas Sass teclea lo siguiente:

gem install sass

Si quieres instalar tanto Sass como Compass:

gem install compass

Instalación en Mac

Como en los Mac Ruby está ya instalado, lo único que tendréis que hacer es abrir el Terminal e instalar Sass.

Para ello escribes en el Terminal (puede que no necesites poner sudo delante)

sudo gem install sass

Para los usuarios de Mac tenemos Codekit que de nuevo hará todo por ti sin necesidad de estar usando el Terminal. A diferencia de Prepos, Codekit es de pago.

Bueno, pues ya tenéis todo listo para empezar. En el siguiente artículo daremos nuestros primeros pasos con Sass.

6 comentarios en “Curso de Sass: Introducción

  1. Gracias por la introducción, SASS está muy bien porque simplifica algunas tareas, pero debido a las nuevas capacidades de CSS 3 y el próximo CSS 4, soy más partidario de usar este preprocesador sólo si la aplicación utiliza Rails.

  2. Que tal…alguien podría decirme porque me sale el siguiente error al compilar

     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.