logo

¿Qué es Sass?

septiembre 28, 2021, Sin comentarios

Sass es un procesador CSS

Tenemos dos maneras de trabajar con Sass:

1-mediante aplicaciones 

2-mediante línea de comandos

En nuestro caso vamos a utilizar Node.js para instalar y configurar Sass. Para ello, instalamos primero Node.js y posteriormente comprobamos que lo tenemos instalado:

node -v
npm -v

Si nos aparece la versión quiere decir que lo tenemos instalado correctamente. A continuación, procedemos a instalar el paquete de Sass mediante Node y NPM.

npm install -g sass //-g es para instalar de forma global el paquete

Si estas en Linux y no te funciona correctamente, instala este paquete:

sudo apt-get install ruby-sass

Tenemos dos maneras de guardar un fichero de Sass, la primera es con la extensión: .scss o bien .sass.

Cuando queramos enlazar nuestro HTML con nuestro fichero Sass no lo podemos hacer directamente, primero tenemos que generar un fichero CSS a partir de nuestro fichero de Sass y es este fichero generado el que enlazaremos con nuestro HTML.

¿Cómo generamos el fichero style.css mediante el fichero de sass?

Para generar este fichero solo tenemos que colocar el siguiente comando.

 sass --watch nombrefichero.scss nuevaconversion.css

Si por alguna razón el comando de arriba falla, usa este de abajo:

ss --watch nombrefichero css:nuevaconversion.css

Con esta línea de comando indicamos que vamos a utilizar sass para convertir un fichero de sass a un fichero de css el cual se va a ejecutar cada vez que yo guarde los cambios en mi fichero de sass gracias al --watch.

¿QUÉ PUEDO HACER CON SASS?

-Crear variables

-Anidar

-Módulos (Es importar un archivo dentro de otro) "@use 'nombrefichero.sass-scss'"

-Mixin (Son funciones o también conocida como agrupación de instrucciones) @mixin nombre($parámetro , $opcionales){} "@include nombre Mixin"

-Herencia (Heredamos unas características de una clase) %nombre-clase {} "%extend %nombre-clase;"

-Operadores (suma - resta - multiplicación - división - etc....)

-Condicionales (if - else if - else)

-Bucles (while - for - each)

¿Quieres compartirlo en las redes sociales?

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

No hay comentarios, anímate y deja el primero.

SERVICIOS
PRODUCTOS
clicktec logolocustec
CONTACTO
Horario: Lunes a viernes de 8.30 a 14.00h y 16.00 a 19.30h
Av. de Andalucía, 56, B, bajo, 23006 Jaén – Españainfo@deditec.es(+34) 953 195 077
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram