¿Qué es Sass? Aprenda a usar este lenguaje de extensión CSS

Las hojas de estilo sintácticamente asombrosas (Sass) son un popular lenguaje de extensión CSS. El idioma existe desde hace unos 15 años. Funciona bien con todas las versiones de CSS, lo que lo hace compatible con todas las bibliotecas y marcos de CSS, desde Bootstrap hasta Foundation.

El lenguaje le permite escribir código Sass y luego compilar ese código en CSS. El valor de usar Sass en lugar de CSS simple es que proporciona funciones adicionales que actualmente están fuera del alcance de CSS.

En este tutorial, aprenderá a usar Sass y sus funciones más importantes.

Instalación de Sass

Hay varias formas de usar Sass en su dispositivo. Estos incluyen ejecutar una aplicación (como LiveReload o Scout-App), descargar Sass de GitHub, o instalarlo usando npm.

Instalación de Sass con npm

Para instalar Sass usando npm necesitarás instalar NodeJS y npm en su dispositivo. Entonces necesitarás crear un paquete.json archivo (que es una buena práctica al instalar cualquier paquete npm en sus proyectos). Puedes crear un básico

paquete.json archivo en el directorio de su proyecto con el siguiente comando de terminal:

npm inicializar -y

Ejecutar este comando generará un archivo package.json con el siguiente contenido:

{
 "nombre": "mi_aplicación",
 "versión": "1.0.0",
 "descripción": "",
 "principal": "index.js",
 "guiones": {
 "prueba": "echo \"Error: no se especificó ninguna prueba\" && exit 1"
 },
 "palabras clave": [],
 "autor": "",
 "licencia": "ISC"
}

los paquete.json El archivo es importante porque sirve como configuración para su proyecto. Cada vez que instala un nuevo paquete npm, el paquete.json El archivo reflejará esto.

Ahora puede instalar Sass insertando el siguiente comando en su terminal:

npm instalar sass

Este comando actualizará el paquete.json archivo creando un nuevo campo de dependencia, que contendrá el nuevo paquete Sass. También generará una nueva paquete-bloqueo.json archivo e instale sass (además de las dependencias) en un node_modules directorio.

Los diferentes tipos de archivos Sass

Un archivo Sass puede tener una de dos extensiones, .hablar con descaro a o .scss. La principal diferencia entre ellos es que el .scss El archivo utiliza llaves y punto y coma (al igual que CSS), mientras que el .hablar con descaro a estructuras de archivos CSS usando sangría (muy parecido a Python). Algunos desarrolladores prefieren usar el .scss archivo ya que su estructura es más cercana a CSS.

Un ejemplo de archivo .scss

$color-primario: azul;
cuerpo {
 color: $color-primario;
 pags {
 color rojo;
 }
}

Un ejemplo de archivo .sass

$color-primario: azul
cuerpo
 color: $color-primario
 pags
 color rojo

Compilar un archivo Sass a CSS

Puede compilar un archivo Sass individual usando el hablar con descaro a programa de línea de comandos:

sass archivo.scss > archivo.css

También puede ejecutar sass en todos los archivos dentro de un directorio específico:

sass scss: dist/css/

Ese comando compila todos los archivos Sass dentro del scs directorio y almacena los archivos resultantes en distribución/css.

Si está usando npm, puede configurar un atajo conveniente para la compilación sass usando el guiones campo en tu paquete.json expediente:

"guiones": {
 "prueba": "echo \"Error: no se especificó ninguna prueba\" && exit 1",
 "sass": "sass --ver scss: dist/css/"
 },

Esta configuración utiliza el --reloj opción. Mantiene sass funcionando y se asegura de volver a compilar esos archivos cada vez que cambian. Para cada archivo, sass generará un .css y un .css.mapa expediente.

Para ejecutar el script Sass anterior, deberá ejecutar el siguiente comando en su terminal:

npm ejecutar descaro

Ejecutar ese comando generará un resultado similar a este:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --ver scss: dist/css/
Compiló scss\main.scss a dist\css\main.css.
Sass está atento a los cambios. Presione Ctrl-C para detener.

Variables Sass

Puede crear variables en CSS hoy, pero hace 15 años las variables CSS no existían, por lo que el soporte de Sass para ellas fue valioso. Las variables Sass funcionan de la misma manera que las variables CSS. Almacenan valores (como colores) que pretende utilizar en un archivo CSS. Uno de los principales beneficios de las variables es que le permiten actualizar muchas ocurrencias de un valor cambiándolo en un solo lugar.

Cada variable de Sass comienza con el signo de dólar, seguido de cualquier combinación de caracteres. Trate de hacer que sus variables sean descriptivas, como el $color-primario ejemplo anterior. Es importante tener en cuenta que una variable Sass no se compila en variables CSS. Por ejemplo, este archivo .scss:

$color-primario: azul;
cuerpo {
 color: $color-primario;
}

Se compilará en el siguiente CSS:

cuerpo {
 color azul;
}

Como puede ver en el archivo anterior, no hay variables CSS. La ventaja de las variables es que cualquier alteración realizada en el archivo Sass actualizará el archivo CSS correspondiente.

Mezclas descaradas

Si tiene una propiedad que desea usar varias veces a lo largo de su proyecto, entonces una variable es genial. Pero si tiene un grupo de propiedades que desea usar como una unidad, un mixin hará el truco.

Cada mezcla comienza con el @mixin palabra clave, seguida del nombre que desea asignar al mixin. Tiene la opción de pasar variables al mixin como parámetros y usar esas variables dentro del cuerpo del mixin, de la misma manera que una función.

Usando una mezcla

@mixin tema de luz ($ color primario: blanco, $ color secundario: # 2c2c2c) {
 familia tipográfica: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 color de fondo: $color-primario;
 color: $color-secundario;
}
#casa {
 @include tema claro (azul);
}

Lo primero que puede notar en el código anterior es que el mixin acepta dos argumentos. Puede asignar valores predeterminados a los argumentos y anularlos cuando los incluya.

Después de haber creado su mixin, puede usarlo en cualquier sección de su sitio web usando el @incluir palabra clave seguida del nombre del mixin.

La compilación del código Sass anterior generará el siguiente código CSS en su archivo de destino:

#casa {
 familia de fuentes: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 color de fondo: azul;
 color: #2c2c2c;
}

Funciones Sass

Además de las diferentes palabras clave, la principal diferencia entre una función y un mixin es que una función debe devolver algo. Puede utilizar las funciones de Sass para calcular valores o realizar operaciones.

@function sumar-números($num-uno, $num-dos){
 $suma: 0;
 $suma: $num-uno + $num-dos;
 @return $suma 
}

Esta función anterior acepta dos números y devuelve su suma. Las funciones de Sass pueden incluso contener sentencias if, bucles for y otras sentencias de flujo de control.

Módulos Sass

Si tuviera que incluir todas sus variables, mixins y funciones en el mismo archivo, tendría un archivo Sass masivo al crear aplicaciones grandes. Los módulos proporcionan una forma de dividir archivos grandes en otros más pequeños que se combinan durante la compilación. Por ejemplo, puede tener un módulo de función y un módulo de mezcla, todo lo que necesita recordar es el @utilizar palabra clave.

Aquí hay un ejemplo que muestra cómo puede separar la mezcla anterior en su propio archivo:

El archivo mixins.scss

@mixin tema de luz ($ color primario: blanco, $ color secundario: # 2c2c2c) {
 familia tipográfica: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 color de fondo: $color-primario;
 color: $color-secundario;
}

El archivo main.scss

@use 'mezclas';
#casa{
 @include mixins.light-tema;
}

Para importar y usar un archivo externo como módulo, deberá usar el @utilizar palabra clave para importarlo. Luego, para usar un mixin específico del archivo importado, anteponga el nombre del mixin específico con el nombre del archivo seguido de un punto. La compilación de los archivos anteriores generará el siguiente código CSS:

#casa {
 familia de fuentes: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 color de fondo: blanco;
 color: #2c2c2c;
}

Utilice Sass para ampliar y organizar su CSS

Sass es una extensión de la sintaxis de CSS. Le permite optimizar sus hojas de estilo y administrarlas de manera más eficiente. Pero aún necesitará tener un dominio de CSS y principios de diseño web para crear diseños efectivos.

Este artículo le enseña cómo instalar y usar Sass. Ha aprendido a crear variables, mixins, funciones y módulos de Sass. Ahora todo lo que le queda por hacer es crear un documento HTML y ver cómo su código Sass cobra vida.

8 consejos y trucos esenciales de CSS que todo desarrollador debe saber

Leer siguiente

Sobre el Autor