Sass: Escribe código CSS con súper poderes

Sass: Escribe código CSS con Súper Poderes

Publicado hace un año

@Cristhian

¿Qué es SASS?

SASS es un lenguaje de estilos más completo, estable a nivel profesional en la actualidad.

Es un compilador de estilos que ha estado en la industria por más de 13 años, tiene un soporte por empresas y cientos de desarrolladores, lo que lo convierte en un lenguaje estable para su uso, está aprobado por un gran porcentaje de desarrolladores en la industria.

Puedes usar SASS sin ningún problema de compatibilidad, trabajan continuamente en la compatibilidad con CSS, lo que te permite usar cualquier librería CSS, sin tener algún error de compilación.

Si quieres empezar a agilizar tus proyectos de Front-End te recomiendo mucho empezar a usar este tipo de herramientas, te ahorras horas de trabajo.

Empezando con la instalación de SASS

Aplicaciones de Escritorio

Existen muchas aplicaciones que te permite complicar los archivos SASS de manera sencilla, estas aplicaciones la puedes encontrar en los sistemas operativos más populares como Windows, Mac, Linux.

Puedes encontrar la mayoría de estas aplicaciones de escritorio de manera gratuita, aunque también están las aplicaciones de pago que te dan algunas características extras.

  • CodeKit (Pago) Mac
  • Compass.app (Pago, Open Source) Mac Windows Linux
  • Ghostlab (Pago) Mac Windows
  • Hammer (Pago) Mac
  • Koala (Open Source) Mac Windows Linux
  • LiveReload (Pago, Open Source) Mac Windows
  • Prepros (Pago) Mac Windows Linux
  • Scout-App (Gratis, Open Source) Windows Linux Mac

Si te gusta utilizar interfaces gráficas para desarrollar tus proyectos, te invito a revisar algunas de estas aplicaciones y empezar a probarlas hasta encontrar la que mejor se adapte para ti.

Usando Líneas de Comando

Si te gusta hacer las instalación de las dependencias para tus proyectos usando líneas de comando, este método es para ti.

Instalar SASS en cualquier lugar (Directo)

Puedes instalar SASS en cualquier sistema operativo (Windows, Linux, Mac). Simplemente descargando el paquete para su sistema operativo desde GitHuby luego agregándolo al PATH, si no sabes como hacer, aquí te dejo un enlace para que puedas agregar cualquier aplicación al PATH en Windows, Mac o Linux

Instalar SASS en cualquier lugar (NPM)

Si usas Node.js como yo puedes usar el administrador de paquetes NPM, para instalar SASS con una simple línea en tu comando.

npm install -g sass

Solo tienes que tener en cuenta lo siguiente antes de instalar SASS con el CMD (Línea de Comando), tienes que instalar Node.js que vendrá con NPM. Tienes que descargar Node.js en su utiliza versión.

Instalanos Sass con Node.js y NPM

Existen muchas más opciones para instalar SASS, dependiendo del sistema operativo o manejador de paquete de tu preferencia puedes instalar esta tecnología, puedes leer más información en lapágina oficial de SASS.

Procesando Archivos SASS

Aunque seguramente estés empezando a desarrollar y te acostumbraste a escribir tus estilos directamente en tu hoja estilos.css, puede ser que no quieras aprender algo nuevo o te sientes inseguro.

Te aseguro que aprender a usar un procesador como SASS te cambiará la vida, tus proyectos estarán más organizado, podrás depurar más fácil el código y te ahorrarás horas de trabajo.

SASS te da características que CSS aun no te da de manera nativa, un ejemplo seria los mixins, funciones, anidamientos, herencias, todo esto combinado hará tu trabajo más fácil y te hará sentir que escribir CSS es divertido.

Una vez que hayas hecho todo el proceso de instalación, que explique anteriormente, puedes empezar a practicar con tu código SASS.

Para empezar a compilar tus estilos, podemos empezar a crear tu primera hoja de estilos la llamaremos estilos.scss (Extensión .scss), podemos agregar algunas estilos de prueba al body.

body {
    background-color: red;
    color: green;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
}

Desde tu CMD puedes ejecutar las siguiente linea sass estilos.scss estilos.css  (Esta línea ejecuta la función sass y recibe dos parámetros el archivo de origen «estilos.scss» y el archivo de destino «estilos.css») esto compilara tu archivo .scss a un archivo estilos.css que podrá ser interpretado por el navegador.

Ejecutando linea de comando para compilar nuestro código
Ejecutando linea de comando para compilar nuestro código
Resultado final después de compilar archivo .scss a uno .css
Resultado final después de compilar archivo .scss a uno .css

Obviamente ejecutar este comando por cada cambio que le hagamos a nuestra hoja de estilo, haría perder todo lo genial que tiene SASS ahí es donde entra otro parámetro de la función –watch agregar este parámetro a nuestra línea hará que SASS vigile los archivos que le indiquemos, ¿qué significa esto?, por cada cambio que hagamos en nuestro archivo .scss al guardar automáticamente se compilara todos los archivos .scss y nos devolverá uno .css con los cambios nuevos.

Para ejecutar este watch lo puedes hacer de la siguiente manera:

sass --watch archivo-origen.scss archivo-destino.css

Tambíen puedes hacer que SASS vigile las carpetas de nuestros proyectos, lo más común es que todos nuestros archivos de desarrollo esté en una carpeta source src/ es lo que encontrarás en la mayoría de los proyectos y estos se compilen en una carpeta de destino dist/ qué es la que se le entregará al cliente.

Un ejemplo sobre esto sería el siguiente:

sass --watch src/scss/archivo-origen.scss dist/css/archivo-destino.css
Esperando cambios para que se compile automáticamente en un archivo .css
Esperando cambios para que se compile automáticamente en un archivo .css

Utilizando extensión Live Sass Compiler en Visual Studio Code

Existen muchos editores de código Sublime Text, Atom, Brackets no se cual es tu favorito, pero, si usas VSC (Visual Studio Code). Tengo que contarte que existe una extensión que nos permite realizar todo el proceso de compilado desde un botón.

Solo necesitaremos desde nuestro editor VSC instalar Live Sass Compiler desde el menú de extensiones nos pedirá reiniciar la aplicación y podremos usarlos, esta extensión depende de otra que se llama Live Server, nos ayudará a recargar nuestro navegador (Firefox, Google Chrome, Opera) en cada cambio que guardemos.

Instalando Live Sass Compiler desde la sección de extensiones de VSC
Instalando Live Sass Compiler desde la sección de extensiones de VSC

Luego de la instalación te recomiendo hacer unas configuraciones para que nuestro archivos estén listo para producción.

Ir a la sección de configuración para instalar la Extensión.
Configurando Live Sass Compiler
Sección de Settings para Live Sass Compiler
Sección de Settings para Live Sass Compiler
Configuración Recomendadas para la extensión Live Sass Compiler
Configuración Recomendadas para la extensión Live Sass Compiler

En el pie de página del Visual Studio Code, saldrá el botón para iniciar la compilación de tus archivos Sass

Aunque con esto que te acabo de decir sería suficiente para empezar a utilizar SASS en VSC, también puedes leer la documentación de la extensión Live Sass Compiler, para aprender más sobre las configuración que se les pueden dar y su uso.

Mejora la organización de los componente de tus aplicaciones Web

Seguramente ahora estás empezando en el mundo del desarrollo web y al momento de hacer una pequeña página web, tienes todos los estilos en una sola hoja con más de 1.000 líneas.

Esto puede ser estresante encontrar la clase que necesitas o se puede convertir realmente confuso leer todo ese código, a mi me paso en mis inició y estoy 100% seguro que a la mayoría de los desarrolladores web también.

La ventaja de utilizar SASS es la capacidad que nos da de separar los estilos de los componentes de nuestra página o aplicación en diferentes archivos. Puedes tener toda una hoja de estilos para la sección del “hero” o para las zona de “servicios” y compilarlo en un solo archivo .css.

Solo necesitas editar tus archivos .scss y compilar para que tu archivo estilos.css este todo el código, siempre necesitarás un archivo con exención .css, por que este es el que el navegador puede interpretar.

Un claro ejemplo sobre esto y que encontrarás en muchos frameworks de CSS es Bootstrap. Es uno de los framework HTML, CSS y JS más populares.

Si lo has usado antes sabrás que tienen varios componentes como Cards, Badges, Botones, Carruseles, Menús de Navegación.

Cada uno de estos componentes tiene su propio archivo scss y luego son compilados en un archivo bootstrap.min.css que es el que utilizaremos en nuestros proyectos.

Guía Básica para el uso de SASS

Ya sabemos como instalarlos, las diferentes manera en la que podemos utilizar SASS, los beneficios y porque deberíamos usarlos en nuestros proyectos.
Es ahora de empezar a ver los súper poderes que nos da esta grandiosa extensión de Css.

Manejo de Variables en SASS

Aunque CSS en la actualidad maneja variables de manera nativa con :root {}, en SASS podemos hacer lo mismo, estos nos ayuda muchísimo, en caso de que necesitemos cambiar por ejemplo un color o un tipo de fuente, lo haremos en nuestro archivo de variables.scss y no uno por uno.

:root {
	--negro: #000000;
	--blanco: #ffffff;
	--rojo: #ff0000;
	--verder: #00ff00;
	--azul: #0000ff;

	--mainFont: "Roboto", sans-serif;
	--fontSize: 16px;
}

body {
	background-color: var(--blanco);
	color: var(--negro);
	font-family: var(--mainFont);
	font-size: var(--fontSize);
}
$negro: #000000;
$blanco: #ffffff;
$rojo: #ff0000;
$verder: #00ff00;
$azul: #0000ff;
$mainFont: "Roboto", sans-serif;
$fontSize: 16px;

body {
	background-color: $blanco;
	color: $negro;
	font-family: $mainFont;
	font-size: $fontSize;
}

Cuando compilamos nuestros archivos sass este toma los valores de las variables y los convierte en código que se pueda entender en CSS, entendiendo esto se puede convertir en una función realmente poderosa, como mencioné antes, puedes hacer un solo cambio en una variable y se verá reflejado en todo el sitio.

Uso del anidamiento

Cuando escribes código HTML, te habrás dado cuenta que existe una especie de anidamiento donde una etiqueta contiene a otra y esto puede suceder en varias capas.

Esto no sucede en CSS, tienes que escribir en una línea, si una etiqueta contiene una o varias etiquetas en su interior, lo que nos puede llevar a tener mucho código junto que es muy lento e ineficiente.

Aquí es donde entra uno de los súper poderes de SASS, nos permite anidar nuestros estilos según lo necesitemos, un ejemplo sería el siguiente:

.selector-padre {
	color: $variableDelColor;
	font-size: 15px;
	.selector-hijo {
		color: $colorDelHijo;
		font-size: 13px;
		&.otra-clase-del-hijo {
			color: red;
		}
	}
}

Dividiendo nuestro código en diferentes archivos

Puedes crear archivos que contengan el código del estilo de los componentes para tu sitio web o aplicación. Esto es una excelente forma de modularizar y organizar tu proyecto.

Un ejemplo fácil sería el siguiente, si intentamos crear la sección Hero que es una muy común en las páginas de aterrizaje, tendríamos que crear un archivo de la siguiente manera _hero.scss cuando son un archivo aparte o parciales como se le conoce tienes que identificar el archivo con un underscore _.
Para que se compile el código de este parcial necesitamos importarlo a nuestra hoja de estilo principal podría ser main.scss  lo haremos utilizando el @import + “la ruta del archivo”, un ejemplo claro sería el siguiente:

// global.scss (Archivo que importaremos)

body {
	font-size: 16px;
	background-color: #f1f1f1;
	color: #444444;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Roboto", sans-serif;
}

// estilos.scss (Archivo Principal)

// Podemos importar otros archivos sass con @import

@import "global";

Mixins, ¿Qué diablos son?

Algunas cosas pueden llegar a ser muy tediosas de escribir, por ejemplo, tienes un botón que claramente se repetirá en muchos lugares de tu sitio web. El ancho, alto, bordes, tamaños de texto son atributos que suelen repetirse en elementos.

Los mixins te ayudan a implementar el código repetitivo en los elementos que necesites utilizando la función @include + nombreDelMixin, es mejor que lo veas en código por eso te dejo un ejemplo a continuación:

@mixin btn-general {
	display: inline-block;
	padding: 16px 24px;
	background-color: $negro;
	font-size: 18px;
}

.btn-primario {
	// Esto llamara todo el código del mixin 
	@include btn-general;
}

Sass es una herramienta realmente poderosa

En esta media guía podemos observar lo mucho que podemos lograr si utilizamos Sass en nuestros proyectos, aunque con lo que te explique en este artículo es suficiente para empezar a trabajar con esta herramienta.

Si estás interesado en aprender con mayor profundidad sobre este compilador, te invito a leer la documentación oficial en el sitio web sass-lang.com.
Ya para finalizar esta guía de Sass, creare un pequeño componente en este caso un card, para que veas lo fácil y eficiente que es usar esta herramienta.

Creado nuestro primer componente con Sass

Para mostrarle el funcionamiento de Sass, desarrollare un pequeño complemento que sería un Card, si has trabajado con bootstrap lo conocerás muy bien. Es una tarjeta donde podemos mostrar información de una persona, producto o algún servicio, siempre incluye una imagen, nombre e información.

Si llegaste hasta aquí ya estoy asumiendo que instalaste Sass en tu maquina y esta listo para trabajar, si no, tienes que instalarlo como te lo indique en el punto de arriba.

Creación, organización de nuestras carpetas y archivos para nuestro proyecto

Empecemos organizando nuestras carpetas y archivos para nuestros proyecto que lo llamaré sass-card tú puedes llamarlo como quieras.

Estoy usando Sublime Text porque el proyecto es pequeño y rápido, pero suelo utilizar Visual Studio Code (Por si te lo preguntas 😛 )

En la imagen podemos ver que tenemos nuestra carpeta principal sass-card que es el que almacena todo nuestro proyecto, luego tenemos nuestro index.html que es el que hace la conexión de todo nuestro código y pueda ser leído por el navegador.

Y por último nuestra carpeta sass esta carpeta es importante es donde estará todo nuestro código de origen, es el que editaremos al momento de hacer un cambio, ¿Por que?, cuando compilamos el código sass automáticamente se nos generará una carpeta y un archivo css.

Aunque borremos estos últimos no habrá problemas, esto se debe a que gracias a nuestros archivos de origen en este caso nuestra carpeta sass podremos generar estos archivos css de manera infinita, por eso es muy importante estos archivos.
Dentro de nuestra carpeta sass encontraremos todo nuestro código de estilos divididos y organizados, para mejor uso y depuración del código.

Explicación de cada archivo de nuestro proyecto

Nuestro primer archivo es el index.html donde tendremos la estructura de nuestro card, este también hará la conexión del código con el navegador y este lo pueda interpretar.

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.min.css">
	<title>Creación de Card con SASS</title>
</head>
<body>
	<!-- Jerarquia de HTML y anidamientos -->
	<div class="card">
		<img src="https://cdn.iconscout.com/icon/free/png-512/avatar-372-456324.png" alt="Imagen de Prueba">
		<div class="card__content">
			<h4 class="title">Cristhian Hernández</h4>
			<p class="text">consectetur adipiscing elit. Fusce nec arcu suscipit, pharetra nulla in, efficitur est. Etiam venenatis ultricies sem ac vulputate. Nullam et laoreet mauris. Aliquam et ligula tortor</p>
		</div>
		<div class="card__btns">
			<a href="" class="links facebook">Facebook</a>
			<a href="" class="links instagram">Instagram</a>
			<a href="" class="links twitter">Twitter</a>
		</div>
	</div>
</body>
</html>

Ahora explicare el archivo principal sass que es el style.scss este agrupara nuestros diferentes archivos y es el que hará la conexión entre todos para luego ser compilado en un style.min.css

El primer archivo que importamos es el _variables.scss, este tendrá todas nuestras variables que utilizaremos en nuestro proyecto (Fuentes, Colores, Tamaños)

@import "variables";
@import "partials/globals";
@import "partials/card";
// Variables en SASS _variables.scss

// Variables de Fuentes
$fuenteTitulo. "Montserrat", sans-serif;
$tipoFuente: "Helvetica". sans-serif;

// Variables de Colores
$bgGradient: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(121,9,102,1) 0%, rgba(0,164,255,1) 100%);
$blanco: #ffffff;
$negro: #020202;
$colorTitulo: $00a4ff;
$grisClaro: #888888;
$facebookColor: #3b5998;
$instagramColor: #c13584;
$twitterColor: #1da1f2;

El siguiente es nuestro archivo _globals.scss que se encuentra dentro de la carpeta partials entonces lo importamos de la siguiente manera @import ‘partials/globals’. Se suele utilizar este archivo para almacenar los estilos globales, como resets de margin y padding, asignación de fuentes y más.

// Estilos globales

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	background-color: $bgGradient;
	font-size: 16px;
	font-family: $tipoFuente;
	color: $negro;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

Y el último de nuestros archivos, pero el que tiene todo nuestro código para crear nuestra card es el _card.scss que de igual manera se encuentra dentro de la carpeta partials, si lo observas bien podrás ver que la indentación representa a la jerarquía del código HTML.

Esto nos ayuda a tener un código más organizado y más fácil de leer.

// Estilos para Card _card.scss

.card {
	background-color: $blanco;
	padding: 20px;
	border-radius: 15px;
	max-width: 500px;
	width: 90%;
	text-align: center;
	box-shadow: 0 12px 10px -10px rgba(0,0,0,0.5);
	&__img {
		width: 160px;
		height: 160px;
		margin: 0 0 15px 0;
	}

	&__content {
		padding: 10px 0;
		margin-bottom: 10px;
		.title {
			font-family: $fuenteTitulo;
			color: $colorTitulo;
			font-size: 32px;
			line-height: 32px * 1.333;
			font-weight: 700;
			margin-bottom: 15px;
		}

		.text {
			color: $grisClaro;
			font-size: 18px;
			line-height: 18px * 1.999;
			font-weight: 400;
		}
	}

	&__btns {
		display: flex;
		justify-content: space-around;
		align-items: center;

		.links {
			display: inline-block;
			padding: 18px 24px;
			background-color: $negro;
			color: $blanco;
			text-decoration: none;
			border-radius: 10px;
			&.facebook { background-color: $facebookColor; }
			&.instagram { background-color: $instagramColor; }
			&.twitter { background-color: $twitterColor; }
		}
	}
}

Compilando nuestro código Sass

Ahora para compilar nuestro código y finalmente tener un archivo .css, abriremos nuestro CMD y ejecutaremos la siguiente línea sass –watch sass/style.scss css/style.min.css –style compressed si lo escribes bien tendrás un resultado como el siguiente:

Ahora analizando un poco la línea, lo que conseguimos con esto es lo siguiente ejecutamos la función sass le pedimos que esté revisando cambios en la carpeta que le pedimos con el –watch donde las rutas a revisar son sass/style.scss que será nuestra carpeta de origen y css/style.min.css que será nuestro archivo final que usaremos en nuestro servidor.

Ahora te estarás preguntando y ¿qué es el –style compressed? Este último parámetro nos ayudará a comprimir todo nuestro código css en una sola línea, ¿esto para que?. Uno de los factores más importante en la actualidad para las páginas web es la velocidad de carga, tener archivos muy pesados vuelve nuestro sitio web lentos y esto es penalizable por Google.

Por eso tener nuestros archivos CSS, JS e incluso los archivos HTML comprimidos nos ayuda con la velocidad de nuestro sitio web.

Existen 4 formas para convertir nuestro archivo final, que son las siguientes:

  • –style nested: Anidado (Nested) es uno de los estilos de salida de sass. Identa las reglas CSS para que coincidan con el anidamiento de la fuente Sass.
  • –style expanded: Expandido (Expanded) es uno de los estilos de salida de sass. Escribe cada selector y declaración en su propia línea.
  • –style compact: Compacto (Compact) es uno de los estilos de salida de sass. Pone cada regla CSS en su propia línea única.
  • –style compressed: Comprimido (Compressed) es uno de los estilos de salida de sass. Elimina tantos caracteres adicionales como sea posible y escribe toda la hoja de estilo en una sola línea.

El resultado que tenemos es el siguiente:

Código Sass compilado en un solo archivo css y comprimido

Tenemos nuestra carpeta Css y nuestro archivo style.min.css que es el que utilizaremos en nuestro proyecto o el que le entregaremos a nuestro cliente.

Ya por fin tenemos nuestro mini proyecto finalizado, el resultado final es:

Resultado final de nuestro pequeño proyecto sass-card

Si te gustaría ver el proyecto en vivo puedes verlo a través de este enlace utilizo Repl.it para subir proyecto pequeños, si estás empezando y quieres utilizarlo para subir tus proyectos y crear un portafolio te recomiendo crear una cuenta Repl.it gratis.

Solo te queda practicar hasta aprender a utilizar esta herramienta, que te cambiara tu forma de trabajar.