# SCSS

Si estás utilizando SCSS (Sassy CSS), es importante conocer algunas de las características y funcionalidades que te permiten aprovechar al máximo este preprocesador. Aquí tienes los puntos más importantes:

#### 1. **Variables**

Las variables en SCSS permiten almacenar valores (como colores, tamaños o cualquier otra propiedad CSS) para reutilizarlos a lo largo del archivo. Esto mejora la mantenibilidad y la organización del código.

```scss
$primary-color: #3498db;
$font-size: 16px;

.button {
  background-color: $primary-color;
  font-size: $font-size;
}
```

#### 2. **Anidación (Nesting)**

SCSS permite anidar selectores de una manera jerárquica, lo que hace que el código sea más legible y estructurado. Sin embargo, debes tener cuidado de no anidar demasiado para evitar reglas demasiado específicas.

```scss
nav {
  background-color: #333;
  
  ul {
    list-style: none;
    
    li {
      display: inline-block;
      
      a {
        color: white;
        text-decoration: none;
      }
    }
  }
}
```

#### 3. **Mixins**

Los mixins son bloques de código reutilizables que puedes insertar en cualquier parte de tu SCSS. Pueden aceptar parámetros, lo que permite generar estilos dinámicos.

```scss
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.button {
  @include border-radius(5px);
}
```

#### 4. **Funciones**

Las funciones en SCSS permiten realizar cálculos o manipulaciones de valores antes de aplicarlos a las propiedades CSS.

```scss
@function calculate-rem($px) {
  $rem: $px / 16;
  @return #{$rem}rem;
}

h1 {
  font-size: calculate-rem(24px);
}
```

#### 5. **Partials y @import**

SCSS permite dividir el código en archivos más pequeños (parciales) y luego importarlos en un archivo principal. Esto facilita la organización y modularización del código.

* Los archivos parciales deben comenzar con un guion bajo (`_archivo.scss`).
* Para importarlos, se usa `@import`.

```scss
// _variables.scss
$primary-color: #3498db;

// main.scss
@import 'variables';
```

#### 6. **Operadores**

SCSS soporta operadores matemáticos, lo que te permite realizar cálculos directamente en tus estilos.

```scss
$base-size: 16px;
$width: $base-size * 3;

.container {
  width: $width;
}
```

#### 7. **Herencia con @extend**

La directiva `@extend` permite que un selector herede las reglas de otro, lo que evita la repetición de código y facilita la reutilización de estilos.

```scss
.button {
  padding: 10px;
  background-color: #3498db;
}

.primary-button {
  @extend .button;
  font-weight: bold;
}
```

#### 8. **@media Queries y Breakpoints**

Es común definir breakpoints usando variables para que sea más fácil mantener la consistencia a lo largo de los archivos de estilo.

```scss
$small-screen: 600px;
$medium-screen: 1024px;

@media (max-width: $small-screen) {
  .container {
    padding: 10px;
  }
}

@media (max-width: $medium-screen) {
  .container {
    padding: 20px;
  }
}
```

#### 9. **Maps**

Los mapas son estructuras de datos en SCSS que permiten almacenar pares clave-valor, lo que es útil para agrupar datos relacionados, como temas o colores.

```scss
$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

.button {
  background-color: map-get($colors, primary);
}
```

#### 10. **Control de flujo (if, for, each, while)**

SCSS permite estructuras de control de flujo como condicionales (`@if`) y bucles (`@for`, `@each`, `@while`), lo que permite mayor flexibilidad y dinamismo en los estilos.

```scss
$themes: (light, dark);

@each $theme in $themes {
  .#{$theme}-theme {
    background-color: if($theme == light, white, black);
    color: if($theme == light, black, white);
  }
}
```

#### Resumen:

* **Variables**: Almacenan valores reutilizables.
* **Anidación**: Hace que los estilos sean más jerárquicos y legibles.
* **Mixins**: Permiten reutilizar bloques de código con parámetros.
* **Funciones**: Realizan cálculos y manipulaciones.
* **Partials e importaciones**: Organizan el código en archivos pequeños.
* **Operadores**: Permiten hacer operaciones matemáticas.
* **Herencia**: Facilita la reutilización de estilos con `@extend`.
* **Media Queries**: Organizan y reutilizan breakpoints.
* **Maps**: Organizan pares de valores clave.
* **Control de flujo**: Permite lógica condicional y bucles.

Estos son los aspectos esenciales que debes conocer si trabajas con SCSS, los cuales permiten crear hojas de estilo más organizadas, dinámicas y fáciles de mantener.