Introducción a Sass

¿Qué es Sass?

SassSyntactically Awesome Stylesheets traducido sería algo así como Hojas de Estilo Sintanticamentes Impresionantes

Sass → es un preprocesador de CSS + lenguaje de hojas de estilo (no compatible con el navegador).

Y ¿Qué es un preprocesador de CSS?

Un preprocesado requiere el proceso de realizar una conversión/compilación. En este caso en particular dicha compilación nos permitirá traducir nuestro código de Sass a CSS.

¿Pueden los navegadores realizar la compilación de Sass? ¿Sass es legible por el navegador?

La respuesta es no, Sass no es legible por el navegador ni tampoco el navegador es capaz de realizar la compilación de Sass. La compilación la debemos de realizar nosotros para que el navegador sea capaz de entender Sass.

¿Porque usar Sass y no CSS?

Ventajas de Sass

  • Se ahorra tiempo ya que es necesario escribir menos código para realizar las cosas. Es más potente que CSS.
  • Nuestro código es más mantenible ya que el código se estructura de una forma más organizada con mecanismos como la identación (nesting), imports, etc. (hablaremos sobre ello al dedillo más adelante).

Ventajas de CSS

  • Al no ser un preprocesador, no requiere una compilación, lo que supone un ahorro de tiempo en realizar compilaciones, aprender un nuevo lenguaje (sobretodo si se utiliza la versión antigua).
  • La sintaxis es menos compleja que la de Sass.
  • Es un lenguaje ideal para iniciarse, en cambio, Sass requiere o sería aconsejable primero haber trabajado previamente con CSS o como mínimo conocerlo.
  • No es necesario aprender un nuevo lenguaje, ni escribir código que no entendible directamente por el navegador.

Sass es un CSS con superpoderes

Instalación de Sass

Para instalar Sass primeramente tenemos que tener instalado:

  • VSC: el que es sin duda alguna ahora mismo el IDE, el entorno de trabajo más potente para el desarrollo web.
  • Node.js: aunque no usaremos node en si, si que usaremos su gestor de packages (Node Package Manager) para instalar Sass. Por ello, descargaremos la versión LTS (Long Time Support) desde la web oficial de node y lo instalaremos como siempre pulsando siguiente siguiente.

Verificando la instalación de node y npm + instalando Sass

Abrimos el VSC y vamos a Terminal > New Terminal:

Y verificamos la instalación de node y de npm desde VSC con el comando -v el cual nos mostrará su versión tanto de node como de npm:

Una vez tenemos node y npm instalado vamos a comenzar la instalación de Sass. Para ello escribimos: npm install -g sass

Vemos cómo se va instalando:

Hasta que finalmente completa su instalación:

Si finalmente ahora realizamos un sass -v podemos confirmar su instalación además de ver sobre la versión que estamos trabajando:

Un poco de historia de Sass

Creado en 2006 por Hampton Catlin y basado en Ruby.

Mejorado por Natalie Weizenbaum y Chris Eppstein los cuales han extendido Sass como SassScript (un lenguaje de script simple) que combina los ficheros Sass con Scripts.

Los archivos Sass pueden tener dos variantes:

  • .SASS (sintaxis con sagría o Sass): son los tradicionales creados por Hampton Catlin en 2006. Utiliza sangría en lugar de corchetes y nuevas líneas.
    Los archivos usan la extensión SASS.
  • .SCSS (Sassy CSS o SCSS): son los mejorados por Natalie Waizenbaum y Chris Epsstein. Son una extensión de la sintaxis de CSS por lo que toda hoja de estilos CSS es válida en SCSS. Los archivos usan la extensión SCSS.

Un ejemplo que nos permitirá ver las diferencias entre SASS vs SCSS vs CSS es:

Nosotros trabajaremos sobre Sassy CSS (con extensión .scss).

Configurando nuestro primer proyecto

Primeramente creamos el proyecto con un documento HTML y un style.scss.

Dentro del HTML añadimos la estructura de un HTML5 y la etiqueta que asocia el documento CSS.

Aunque si nos fijamos, podemos observar que en nuestro proyecto hemos creado un fichero style.csss y que nuestra etiqueta que vincula el archivo apunta hacía el style.CSS.

Editando nuestro style.SCSS

Nuestro fichero principal de SCSS será nuestro style.SCSS. En un futuro, veremos que podemos añadirle en su interior otros ficheros. Pero por el momento, vamos a editar el fondo de nuestro web

Si abrimos el documento HTML, podemos ver que nada ha cambiado:

Esto es debido a que vamos a realizar una compilación, la cual, nos creará el documento correcto. Para ello, vamos a la terminal y verificamos que estemos situados en la ruta del proyecto (VSC ya nos lo hace por defecto si abrimos la terminal desde el propio IDE):

Si ahora verificamos el proyecto podremos ver que se nos han creado los documentos:

Y que, si cargamos la página web, ahora sí que los cambios se han efectuado:

Pero y si queremos volver a hacer otro cambio ¿Vamos a tener que realizar la compilación de nuevo? ¿Os imagináis constantemente así? La respuesta es SI pero NO ya que tenemos otro mecanismo que no soluciona esto:

Utilizando este comando automáticamente siempre que modifiquemos nuestro style.SCSS sin cerrar la terminal, los cambios se nos auto compilaran. Siempre que el archivo este correctamente escrito sintácticamente hablando claro está.

Vamos a cambiar el fondo y vemos que ahora se nos cambia directamente. Y que en la consola nos aparece que se ha compilado correctamente.

Si escribimos algo mal, también nos mostrará un error:

Instalando Live sass compiler

Existe una alternativa mejor a esto, la de utiliza un pluggin llamado LIVE SASS COMPILER con la que nos ahorraríamos hasta el tener que escribir esa instrucción o tener constantemente una terminal abierta con la instrucción sass –wath junto a los archivos.

Vamos a instalarlo desde:

Con esto si cerramos la terminal y seguimos teniendo un error se nos mostrará de la siguiente manera:

Ante el caso que nos dé un error, el plugin live sass compiler no es capaz de encontrar un archivo válido y una vez lo resolvamos tendremos que ir a la barra de debajo del Terminal a:

La cual nos desplegara un output con el problema:

Si resolvemos el problema y pulsamos sobre watch sass:

El plugin buscará el archivo nuevamente y nos aplicará constantemente los cambios que efectuemos automáticamente:

Solamente se para cuando exista un error y tendríamos que efectuar el paso que acabamos de ver. Si volvemos a cambiar el color, simplemente vemos que se nos cambia en caliente con tan solo guardar el documento:

Espero que os haya gustado el artículo, en próximos profundizaremos más sobre el funcionamiento de SCSS. ¡Saludos!

4 comentarios

  1. This is the right blog for everyone who wishes to understand this
    topic. You understand so much its almost hard to argue with you (not that
    I personally will need to…HaHa). You certainly put a new spin on a subject that has been discussed for a long time.
    Wonderful stuff, just excellent!

  2. Thanks for the marvelous posting! I seriously enjoyed reading it, you
    may be a great author. I will always bookmark your blog and definitely will come back from
    now on. I want to encourage one to continue your great writing, have a nice day!

  3. Howdy would you mind letting me know which web host
    you’re using? I’ve loaded your blog in 3 completely different web browsers
    and I must say this blog loads a lot faster then most. Can you
    suggest a good web hosting provider at a reasonable price?
    Thanks, I appreciate it!

  4. I’m impressed, I have to admit. Seldom do I come across a
    blog that’s both equally educative and engaging, and let me tell
    you, you’ve hit the nail on the head. The issue is something that not enough men and
    women are speaking intelligently about. Now i’m very happy that I came across this
    in my hunt for something relating to this. asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

Deja una respuesta

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

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar