Sumario Apuntes de curso SASS/SCSS

Curso de SASS (sass/scss)

SCSS, también conocido como Sassy CSS, es un preprocesador de CSS. Fue diseñado para
facilitar la tarea de escribir CSS al agregar características avanzadas como variables,
anidamiento, mixins y más.
Aquí te dejo una breve descripción de estas características:
Variables: Permiten definir valores que pueden ser reutilizados a lo largo de la hoja de
estilo.
Anidamiento: Facilita la organización y legibilidad del código CSS permitiendo anidar
selectores.
Mixins: Son un tipo de función que acepta argumentos y se puede reutilizar a lo largo de
todo el código.
El SCSS funciona generando archivos CSS estándar que pueden ser interpretados por
cualquier navegador web2. Aunque CSS y SCSS buscan el mismo objetivo de crear aplicaciones
web visualmente atractivas y bien organizadas, el uso de SCSS puede simplificar y mejorar el flujo
de trabajo de un desarrollador.

Aquí tienes un ejemplo de cómo se ve el código SCSS:

SCSS CSS
$color-principal: #333; body {
color: #333;
body { font-family: Arial, sans-serif;
color: $color-principal; font-size: 0.9em;
font: { }
family: Arial, sans-serif; body p {
size: 0.9em; color: #999;
} }
p{
color: lighten($color-principal, 20%);
}
}

Como puedes ver, SCSS permite una escritura más eficiente y organizada del código CSS.

Para compilar un archivo SCSS a CSS usando Ruby, necesitarás utilizar la gema sass.
Aquí te dejo los pasos para hacerlo:

1. Instala la gema sass. Si aún no la tienes instalada, puedes hacerlo ejecutando el siguiente
comando en tu terminal:

gem install sass

2. Compila tu archivo SCSS. Una vez que tienes la gema instalada, puedes compilar tu
archivo SCSS a CSS con el siguiente comando:

sass input.scss:output.css
En este comando, donde "input.scss" es el nombre de tu archivo SCSS y
"output.css" es el nombre del archivo CSS que se generará el cual debe estar
vinculado por medio del query "link" en html para que los estilados surtan efecto.

3. Ejecuta el comando en ruby [sass --watch input.scss:output.css] Para que todo cambio
que se realice en el input.scss sea compilado en tiempo real al output.css.

, VARIABLES
Las variables en SCSS, al igual que en muchos lenguajes de programación, permiten
almacenar un valor que luego se puede reutilizar a lo largo de todo el documento SCSS. Las
variables en SCSS comienzan con el carácter $.

Las variables son útiles para almacenar valores que se utilizan con frecuencia, como
colores, tamaños de fuente, márgenes, etc. Esto facilita la codificación y el mantenimiento del
código CSS, creando diseños consistentes.

Aquí tienes un ejemplo de cómo se definen las variables en SCSS:

$color-primario: #55A;
$color-secundario: #6B6;
$color-texto: #666;

$espaciado-estandar: 10px;
$espaciado-doble: 20px;

$fuente-normal: 1em;
$fuente-pequena: 0.8em;
$fuente-grande: 1.4em;

$tipografia-general: arial, verdana, sans-serif;
$tipografia-alternativa: 'Times New Roman', Times, serif;

En este código, se definen varias variables, como $color-primario, $color-secundario,
$color-texto, etc., que luego se pueden utilizar en todo el documento SCSS.

Es importante mencionar que las variables SCSS se compilan en CSS estándar, lo que
significa que no se incluyen en la salida CSS. Esto permite que el CSS resultante sea compatible
con todos los navegadores.