Características de Sass

Por user Alexander Guevara Benites
Características de Sass

En este tutorial exploraremos algunas de las características de Sass.

En tutoriales anteriores hablamos sobre qué es Sass y cómo instalarlo en nuestros ordenadores. Hoy seguiremos hablando de este preprocesador, profundizando en algunos detalles.

Como ya mencionamos antes, al momento de trabajar con Sass podemos utilizar dos sintaxis: SCSS o SASS. La diferencia entre ambas es que la primera es muy parecida a cuando escribimos CSS, incluso podemos copiar y pegar el código de un style.css en un style.scss y funcionaría sin problema alguno; por otro lado, la segunda sintaxis es algo diferente, pues aquí reemplazamos los corchetes por indentación en las propiedades de una clase o etiqueta.  

En Sass tenemos la posibilidad de poder convertir un style.scss a un style.sass y viceversa. Para esto debemos ejecutar el comando desde nuestro terminal 

sass-convert style.scss style.sass

Se nos crea un archivo style.sass con la sintaxis propia de esa extensión.

Por otra parte, si queremos empezar a trabajar con SASS en nuestros proyectos, el código que vamos a escribir en SASS deberá ser compilado a un código CSS normal, el cual será usado por un HTML para dar estilos a sus elementos.

Para hacer esta compilación en la terminal deberemos escribir el siguiente comando.

sass ./origen/style.scss ./destino/style.css

De esta forma ya tendríamos nuestro archivo style.css en la ubicación que le indicamos, pero cuando estamos trabajando en un proyecto, es muy tedioso realizar esta compilación cada vez que hacemos cambios. Para evitar esto, agregaremos la opción de --watch a la cadena antes mencionada, de manera que cuando detecte que guardamos cambios en el archivo style.css, automáticamente compile y podamos tener esos cambios en nuestro style.css 

El comando que debemos escribir en la terminal es el siguiente:

sass --watch ./origen/main.scss ./destino/main.css

El archivo CSS que se nos genera luego de la compilación tiene un style de Nested, el cual viene por defecto en SASS.


Nosotros podemos cambiar estos estilos dependiendo de lo que queramos tener en nuestro CSS. Dentro los estilos que podemos escoger se encuentran:

Compact

sass --watch --style compact ./origen/main.scss ./destino/main.css


Compressed

sass --watch --style compressed ./origen/main.scss ./destino/main.css


Expanded

sass --watch --style expanded ./origen/main.scss ./destino/main.css


La diferencia entre estos estilos es el tamaño que ocupan y que tan legibles son. Por ejemplo, si queremos que un css sea legible, podríamos escoger entre Expanded o Nested pero su tamaño sería mayor en comparación al de Compact y Compressed, siendo esta última la que menor tamaño ocupa, ya que todos los estilos están escritos en una sola línea. Claro está que estamos hablando de tamaños pequeños. En el caso de los ejemplos que mostré, los archivos tienen 89bytes en Expanded y 79bytes en Compressed. El tamaño variará según aumentemos la cantidad de líneas de código.

Mi recomendación es que mientras estemos trabajando el proyecto, utilicemos Expanded o Nested y, una vez terminado de compilar el CSS, usemos Compressed para tener un archivo más ligero. 

Por ahora hemos terminado este tutorial sobre características de SASS. Si deseas aprender más, te invitamos a acceder a nuestro Curso de Sass. Recuerda que en Devcode tenemos una amplia variedad de cursos que complementarán tu aprendizaje. No olvides compartir el tutorial con tus amigos y si tuvieras algún comentario, duda o sugerencia, puedes dejarla siempre en la caja de comentarios.

user

Alexander Guevara Benites

Nymeria's father | Designer 3D | Pokemon Master | Videogame Lover