Sass es un preprocesador CSS que nos permite dotar de superpoderes a css por medio de la anidación de selectores, la creación de archivos parciales, y funciones avanzadas, Todo este proceso será compilado por el compilador de sass para entregarnos finalmente un único archivo css ya listo y optimizado para producción.

Que es la compilación de código?

La compilación de código es el proceso de transformar código fuente escrito en un lenguaje de programación de alto nivel (como C++, Java, o TypeScript) a un lenguaje de nivel inferior (como código máquina, bytecode, o JavaScript) que puede ser ejecutado por una computadora. Este proceso es realizado por un compilador, que toma el código fuente, lo analiza, lo optimiza y genera el código objeto correspondiente.

Proceso de instalación y Compilación con Node.

Instalamos SASS por medio de la terminal de comandos utilizando NPM:

npm install -g sass

Una vez instalado, puedes compilar un archivo SASS indicando en el comando el archivo que quieres compilar y seguido la ruta destino y el nombre con el que quieres que la compilación salga. Por ejemplo puedes compilar un archivo llamado styles.scss a CSS ejecutando el siguiente comando en la terminal:

sass styles.scss styles.css

Este comando compilará styles.scss y generará un archivo styles.css con los estilos en CSS. Cabe aclarar que el archivo de salida de la compilación puede llevar el nombre que tú quieras.

Para lograr compilar y que el resultante ya esté optimizado y comprimido ejecutamos el siguiente comando:

npx sass --style=compressed input.scss output.css

También podemos hacer que el resultado de la compilación sea mas legible y amigable para esto podemos ejecutar el siguiente comando:

npx sass --style=expanded input.scss output.css

Es importante que sepamos que de esta forma el archivo css resultante no se encuentra optimizado es por eso que la opcion recomendable para compilar es compressed.

Si queremos que la terminal esté pendiente de los nuevas modificaciones y siga con el proceso de compilación sin que el mismo se paré podemos ejecutar el siguiente comando:

npx sass --watch input.scss output.css

con la combinación de teclas ctrl + c podemos frenar el proceso de compilación en cualquier momento.

Proceso de compilacion con la extensión Live Sass compiler.

• Buscamos la extensión en la parte de extensiones de visual studio Code.

• configuramos las opciones que nos ofrece live sass:

• Ya dentro de la configuración de la extensión damos click en settings Json dentro de la opción Format

Una vez dentro nos encontraremos con el archivo de configuración de Visual Studio donde debemos pegar el siguiente fragmento de código para definir el tipo de compilación y la carpeta de destino de la misma.

{
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css" 
    }
  ],
  "liveSassCompile.settings.generateMap": true,
  "liveSassCompile.settings.showOutputWindow": true
}

format: Especifica el formato del CSS generado. Puede ser nested, expanded, compact, o compressed.
extensionName: La extensión del archivo compilado.
savePath: La ruta donde se guardarán los archivos compilados. Puedes especificar una ruta relativa a la ubicación del archivo SCSS.

Diferentes formatos de compilacion

Formato compact

Descripción: En el formato compact, cada regla CSS se escribe en una sola línea.
Características:
Menos líneas en comparación con el formato expanded.
Las reglas aún son legibles.
No elimina espacios en blanco innecesarios ni comentarios.

.class1 {
  color: red;
}
.class2 {
  color: blue;
}

Se convierte en :

.class1 { color: red; }
.class2 { color: blue; }

Formato compressed

Descripción: En el formato compressed, el CSS generado está completamente minificado.
Características:
Elimina todos los espacios en blanco innecesarios.
Elimina los comentarios.
Todo el CSS se escribe en una sola línea.
Ideal para la producción, ya que reduce el tamaño del archivo.

.class1 {
  color: red;
}
.class2 {
  color: blue;
}

Se convierte en:

.class1{color:red}.class2{color:blue}

Nested

Características del Formato nested
Estructura Jerárquica: Mantiene la estructura de anidamiento de los selectores como se escriben en el archivo Sass, lo que facilita la comprensión de las relaciones entre los selectores.
Legibilidad: Es fácil de leer y entender, ya que la salida CSS sigue una estructura similar a la del Sass original.
Espacios y Sangrías: Utiliza sangrías para mostrar la jerarquía de los selectores

.navbar {
  background-color: #333;

  .nav-item {
    color: #fff;

    &:hover {
      color: #f0f0f0;
    }
  }
}

Se convierte en:

.navbar {
  background-color: #333; }
  .navbar .nav-item {
    color: #fff; }
    .navbar .nav-item:hover {
      color: #f0f0f0; }

Sintaxis SASS

Nesting

El nesting en Sass se refiere a la capacidad de anidar selectores CSS dentro de otros selectores de una manera que refleja la jerarquía HTML, lo que facilita la organización y la legibilidad del código CSS.

¿Cómo Funciona el Nesting en Sass?
En lugar de escribir selectores CSS largos y repetitivos, puedes anidar selectores dentro de otros selectores para indicar que están relacionados. Sass luego convierte esta estructura anidada en CSS plano, expandiendo los selectores anidados según corresponda.

1) Ejemplo basico de Nesting en Sass

HTML básico

    <div>
      <p>Lorem ipsum</p>
    </div>
    <br />
    <br />
    <br />
    <br />

CSS Inicial (Éste recuadro muestra como ustedes tendrían sus estilos css antes de usar SASS)

div {
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 15px;
}

div p {
  font-size: 20px;
  color: white;
  font-family: Arial, sans-serif;
}

Lo mismo escrito con sass

div {
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 15px;
  p {
    font-size: 20px;
    color: white;
    font-family: Arial, sans-serif;
  }
}

2) Segundo Ejemplo mas complejo

HTML básico

    <ul>
      <li>
        <a href="">Enlac1 </a>
        <a href="">Enlace2 </a>
      </li>
    </ul>
    <br />
    <br />
    <br />
    <br />

css inicial (Éste recuadro muestra como ustedes tendrían sus estilos css antes de usar SASS)

ul {
  list-style: none;
}

ul li {
  padding: 15px;
  display: inline-block;
}

ul li a {
  text-decoration: none;
  font-size: 16px;
  color: #444;
}

Lo mismo escrito con SASS

ul {
  list-style: none;
  li {
    padding: 15px;
    display: inline-block;
    a {
      text-decoration: none;
      font-size: 16px;
      color: #444;
    }
  }
}

3) Tercer Ejemplo mas uso del operador &

El operador & en SASS es conocido como el operador de referencia padre y se utiliza principalmente para hacer referencia al selector de nivel superior dentro de una regla anidada. Este operador es útil para aplicar estilos en función del contexto del selector actual y permite crear selectores más específicos de manera concisa.

HTML inicial

 <ul>
      <li>
        <a href="">Enlac1 </a>
        <a href="">Enlace2 </a>
      </li>
    </ul>

CSS Inicial (Éste recuadro muestra como ustedes tendrían sus estilos css antes de usar SASS)

li {
  color: blue;
}

li:hover {
  color: red;
}

Lo mismo escrito Con SASS

li {
  color: blue;
  &:hover {
    color: red;
  }
}

vars

Las variables son una manera de guardar información que necesites reutilizar en tus hojas de estilos: colores, dimensiones, fuentes o cualquier otro valor. SASS utiliza el símbolo dólar ($) al principio de la palabra clave para crear una variable.

Estas variables se comportan como atributos CSS, y su valor puede ser cualquiera que pudiera adquirir un atributo CSS.

Una buena práctica común consiste en definir todas las variables globales al principio del fichero, para que puedan localizarse rápidamente.

Ejemplo de variables:

    <div>
      <h4 class="titulo">Lorem ipsum</h4>
      <p class="informacion">Lorem, ipsum dolor sit amet</p>
    </div>
    <br />
    <br />
    <br />
    <br />

CSS inicial(Éste recuadro muestra como ustedes tendrían sus estilos css antes de usar SASS)

.titulo {
  font: normal;
  font-size: 24px;
  font-family: Open Arial, Helvetica, sans-serif;
  color: #a1a1a1;
}

.información {
  color: #444;
}

Lo mismo escrito con SASS

$fuente-titulo: normal, 48px/2, Open Arial, Helvetica, sans-serif;
$color-titulo: #a1a1a1;
$color-información: #444;

.titulo {
  font: $fuente-titulo;
  color: $color-titulo;
}

.información {
  color: #444;
}

Archivos Parciales (partials)

Estos archivos parciales suelen contener fragmentos de código reutilizables, como variables, mixins, funciones, y estilos comunes, que pueden ser compartidos entre múltiples archivos SASS. Estos archivos están destinados a ser importados en otros archivos SASS. los archivos parciales deben escribirse comenzando con _ (guión bajo) algunos ejemplos de archivos parciales pueden ser los siguientes:

_variables.scss
Este archivo contiene todas las variables que se usarán en el proyecto, como colores, fuentes, tamaños, etc.

// _variables.scss
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Helvetica, sans-serif';

_reset.scss
Este archivo contiene un conjunto de estilos de "reset" para asegurar que los navegadores rendericen todos los elementos de forma más consistente.

// _reset.scss
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

_base.scss
Este archivo contiene estilos base para elementos HTML comunes.

// _base.scss
body {
  font-family: $font-stack;
  color: $primary-color;
}

h1, h2, h3, h4, h5, h6 {
  color: $secondary-color;
}

import

En Sass, @import se utiliza para incluir el contenido de un archivo en otro. Esto permite dividir el CSS en múltiples archivos más pequeños y organizados, lo que facilita la gestión y el mantenimiento del código. A diferencia del @import de CSS, que requiere que el navegador haga múltiples solicitudes HTTP, el @import de Sass se resuelve durante la compilación, combinando todos los archivos en un único archivo CSS.

Ejemplo Básico de @import

Supongamos que tienes dos archivos: por un lado un archivo parcial _variables.scss y por otro lado un archivo principal styles.scss.

_variables.scss

$primary-color: #333;
$font-stack: Helvetica, sans-serif;

styles.scss

@import 'variables';

body {
font: 100% $font-stack;
color: $primary-color;
}

CSS Generado

body {
font: 100% Helvetica, sans-serif;
color: #333;
}

Operaciones Con SASS

En Sass, puedes realizar una variedad de cálculos directamente en tus archivos de estilo, lo que te permite crear estilos dinámicos y flexibles. A continuación se presentan algunos ejemplos de cálculos que puedes hacer en Sass:

Suma

$base-spacing: 10px;
$double-spacing: $base-spacing + 10px;

.container {
  padding: $double-spacing; // 20px
}

Resta

$full-width: 100%;
$sidebar-width: 25%;
$content-width: $full-width - $sidebar-width;

.content {
  width: $content-width; // 75%
}

Potencia

$base: 2;
$exponent: 3;
$power: pow($base, $exponent);

.result {
  width: $power * 10px; // 80px (2^3 = 8)
}