¿Qué es SASS?

1. SASS significa Syntactically Awesome Stylesheets ("Hojas de estilo sintácticamente excelentes"). Es una forma más fácil y poderosa de escribir CSS y ahorra mucho tiempo.

2. SASS es en realidad un preprocesador. La definición de SASS se formula de la siguiente manera:

SASS es un lenguaje de secuencias de comandos de preprocesador que se interpreta o compila en hojas de estilo en cascada CSS.

¿Por qué SASS?

1. Diseñar HTML usando solo CSS es muy desorganizado y requiere mucho tiempo. Esta es una de las razones principales por las que los aspirantes a desarrolladores web se están cambiando a SASS.

2. SASS es una versión abreviada de CSS.

3. Al mismo tiempo, SASS proporciona funciones avanzadas de CSS. Se usa en la programación para diseñar páginas, por lo que aprender SASS será útil para los desarrolladores web novatos.

Brevemente sobre SASS

1. Posee una amplia funcionalidad.

2. Compatible con todas las versiones de CSS (CSS1, CSS2, CSS3).

3. Maduro, durante más de 14 años ha sido mantenido activamente por el equipo de desarrollo.

Funcionalidad de SASS

1) Variables.

2) Impurezas.

3) Extiende.

4) Importaciones.

Las variables en SASS son las mismas que en todos los demás lenguajes de scripting y programación. Almacenan valores. En SASS, un nombre de variable siempre va precedido de un $.

Las variables SASS se utilizan para almacenar cualquier propiedad CSS: tamaño de fuente, color, familia de fuentes, etc.

Aquí está la sintaxis para declarar variables en SASS:

Mixins

1) Los mixins en SASS se utilizan principalmente por motivos de reutilización .

2) Los mixins le permiten definir estilos para reutilizarlos en toda la hoja de estilo.

Declaración de Mixins:

Ejemplo:

Uso de mixins en estilos

Para cualquier selector de elemento, clase o id, se cumple lo siguiente:

Incluso agregan estilos adicionales al selector y usan cualquier número de mixins.

Importaciones

En proyectos reales, cada vez hay más páginas con HTML y estilo, y a medida que crece el equipo de desarrollo, cada proyecto de este tipo se vuelve más grande. Durante este período, es increíblemente difícil mantener todos los estilos (SASS) en un archivo SASS.

Por lo tanto, el código SASS generalmente se divide en módulos (bloques de código más pequeños) y se coloca en diferentes archivos.

En esta situación, cuando algún archivo SASS necesita datos/código de otro archivo SASS, surgen preguntas:

¿CÓMO PROCEDER AQUÍ?

¿CÓMO PUEDE ESTE ARCHIVO ACCEDER A DATOS/CÓDIGO DE OTRO ARCHIVO?

La respuesta proviene de la siguiente función SASS:  import

Import le permite acceder a datos/código de otro archivo SASS e importar a este archivo no solo un archivo ubicado en el mismo directorio, sino también un archivo de otro directorio.

Ejemplo:

"Se extiende"

Digamos que tenemos un CSS clase A con muchas propiedades de estilo. Y también está la clase B que, además de algunas propiedades de estilo adicionales, requiere esas mismas propiedades de estilo de clase A. ¿Cómo estar aquí?

¿COPIAR Y PEGAR PROPIEDADES DE LA CLASE A A LA CLASE B?

PERO, ¿ES UNA BUENA PRÁCTICA ESCRIBIR ESTILOS?

No, esta es una mala práctica.

Para abordar esto, SASS proporciona la funcionalidad Extends , que permite que una clase herede las propiedades de otra clase. Y esta práctica es muy buena.

Considere el siguiente ejemplo:

Clase A
Clase B

De estas dos imágenes, está claro que la clase b-video-imghereda las propiedades de la clase center-block que usa la funcionalidad SASS extend. Y sí, esta es la sintaxis para extend.

TENGA EN CUENTA: En SASS, la sangría aparece aquí. Debe estar correctamente sangrado, de lo contrario se arrojará un error.

Archivos "parciales" en SASS

Prefijar cualquier archivo SASS con el símbolo SASS _omite la visualización de esos archivos y, por lo tanto, no se compilan. Dichos archivos se denominan "Parciales" ("fragmentos").

Instalación de SASS

En primer lugar, Ruby debe estar instalado en la computadora. En ordenadores Mac, Ruby ya viene instalado, pero para Windows tendrás que descargarlo desde aquí.

Luego abra una terminal e ingrese el siguiente comando:

gem install sass

En unos segundos, se instala SASS, lo que se informa en la terminal.

Luego abra una terminal e ingrese el siguiente comando:

gem install sass

En unos segundos, se instala SASS, lo que se informa en la terminal.

Varias herramientas para compilar SASS

  1. Usando la terminal:

a) compilar manualmente con el comando

sass filename.sass filename.css

Este comando debe ejecutarse cada vez que haya un cambio en el archivo SASS.

b) configurar el observador en archivo SASS / compilación automática con comando

sass –watch filename.sass:filename.css

2. Además, existen herramientas en línea para configurar un observador en un archivo SASS.

Fuentes:

  1. https://sass-lang.com/
  2. https://devslopes.com/

Compartir:

0 comentarios

Deja una respuesta

Marcador de posición del avatar

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

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