Sass I
Tags: webdev, beginners, css
Published: 2024-06-20 03:50:03



**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:

```bash
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:

```bash
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:

```bash
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:

```bash
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:

```bash
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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qug8gkqekh11bszs7jbl.png)


- configuramos las opciones que nos ofrece live sass:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eitnvjxvhnw0ovntadje.jpg)


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lgl52o2hyhrbivrryn8j.jpg)

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.

```json
{
  "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.

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

##### Se convierte en :

```bash
.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.

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

##### Se convierte en:

```bash
.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

```bash
.navbar {
  background-color: #333;

  .nav-item {
    color: #fff;

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

##### Se convierte en:

```bash
.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

```HTML
    <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*)

```css
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

```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

```HTML
    <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*)

```css
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

```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

```HTML
 <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*)

```css
li {
  color: blue;
}

li:hover {
  color: red;
}
```

##### Lo mismo escrito Con SASS

```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:

```HTML
    <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*)

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

.información {
  color: #444;
}
```

##### Lo mismo escrito con SASS

```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.

```sass
// _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.

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

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

```sass
// _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**

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

**styles.scss**

```bash
@import 'variables';

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

```

**CSS Generado**

```bash
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

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

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

```

##### Resta

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

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

```

##### Potencia

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

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