Sass II - Funciones avanzadas

---

Operador &

---

El operador & en SASS es un operador de referencia que se utiliza para hacer referencia al selector actual dentro de una regla anidada. Es especialmente útil para aplicar estilos a pseudo-clases, pseudo-elementos, y combinadores, así como para anidar selectores complejos de manera más organizada.

HTML

<button class="button">Click Me</button>

SCSS

.button {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;

  // Usando el operador & para el estado hover
  &:hover {
    background-color: #2980b9;
  }
}

Condicionales

---

Imagina que estás pintando diferentes tipos de casas con colores diferentes dependiendo de su tamaño. Si una casa es pequeña, la pintas de verde. Si es grande, la pintamos de negro. En este caso:

• Condición: Es como una pregunta que haces antes de decidir qué color usar. Por ejemplo, preguntas "¿La casa es grande o pequeña?".
• Respuesta: Es lo que decides hacer después de hacer la pregunta. Si la casa es grande, decides pintarla de azul. Si es pequeña, decides pintarla de verde.

En Sass, los condicionales funcionan de manera similar. Puedes decirle a Sass que haga algo dependiendo de cómo sean las cosas (como el tamaño de un botón en tu página web). Por

Estructura

// Definición de una variable
$variable: valor;

// Uso de un condicional @if
selector {
  @if condición-1 {
    // Estilos si condición-1 es verdadera
  } @else if condición-2 {
    // Estilos si condición-2 es verdadera
  } @else {
    // Estilos si ninguna de las condiciones anteriores es verdadera
  }
}

@if

---

Ejemplo 1

HTML

<button class="button">Ver más</button>

SCSS

$button-width: 100px;

.button {
  padding: 10px 20px; // Padding fijo
  color: white;
  font-size: 16px; // Tamaño de fuente fijo
  width: $button-width; // Ancho del botón
  border: none;

  // Condiciones para el color de fondo basado en el ancho del botón
  @if $button-width > 120px {
    background-color: black;
    color: white;
  } @else {
    background-color: green;
    color: white;
  }
}

Bucles

---

Imagina que estás en una fábrica de autos. cada auto que se trmina de fabricar tiene que llevar un numero diferente identificando el orden en que fue creado, En lugar de escribir cada número uno por uno en cada etiqueta, usas una máquina especial que los imprime automáticamente en orden.

Bucle: Es como esa máquina especial que te ayuda a imprimir todos los números en las etiquetas de los autos sin tener que hacerlo manualmente.

En Sass, los bucles son como esa máquina especial. Te permiten repetir una acción (como escribir estilos CSS) para muchos elementos diferentes (como botones, en nuestro caso) de manera automática y ordenada.

@for

---

Estructura

// Uso de un bucle @for
@for $i from start through end {
  selector-#{$i} {
    // Estilos que usan $i
  }
}

Variable de Iteración: La variable de iteración $i se puede utilizar dentro del bloque de estilos para aplicar estilos dinámicos basados en su valor actual.

Interpolación: Utiliza la interpolación #{$i} para crear selectores y propiedades dinámicas.

Uso de through vs. to:
through: Incluye el valor final en la iteración (1 through 3 incluirá 1, 2 y 3).
to: Excluye el valor final en la iteración (1 to 3 incluirá 1 y 2, pero no 3).

Ejemplo 1

HTML

    <div class="container-item">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>

SCSS

.container-item {
  display: flex;
}

@for $i from 1 through 3 {
  .item:nth-child(#{$i}) {
    width: 300px;
    height: 50px;
    background-color: lighten(#db34a3, $i \* 10%);
    color: white;
    padding: 10px;
    margin: 5px 5px;
  }
}

Ejemplo 2

HTML

    <div class="container-circle">
      <div class="circle">1</div>
      <div class="circle">2</div>
      <div class="circle">3</div>
      <div class="circle">4</div>
      <div class="circle">5</div>
      <div class="circle">6</div>
    </div>

SCSS

.container-circle {
  display: flex;
  justify-content: center;
  align-items: center;
}

@for $i from 1 through 6 {
  .circle:nth-child(#{$i}) {
    background-color: hsl(241, 57%, 45%);
    border-radius: 50%;
    width: 50px * $i;
    height: 50px * $i;
  }
}

@each

---

Es una directiva que permite iterar sobre listas de datos en forma de pares clave-valor. Es muy útil para generar estilos de manera dinámica basados en datos estructurados como mapas o listas.

Estructura

@each <variable> in <expression> { ... }

Ejemplo 1

HTML

<div class="buttons-container">
    <a href="#" class="button-red">Botón Rojo</a>
    <a href="#" class="button-blue">Botón Azul</a>
    <a href="#" class="button-green">Botón Verde</a>
  </div>

SCSS

// Definimos una lista de colores
$colores: red, blue, green;

// Aplicamos estilos a botones usando @each
@each $color in $colores {
  .button-#{$color} {
    background-color: $color;
    padding: 10px 20px;
    color: white;
    text-transform: uppercase;
    margin-right: 10px;
    display: inline-block;
    text-decoration: none;

    &:hover {
      background-color: lighten($color, 10%);
    }
  }
}

@map

---

En Sass, @map es una característica que permite trabajar con mapas, una estructura de datos que almacena pares clave-valor. Los mapas son útiles para manejar y organizar datos de manera eficiente dentro de los estilos CSS.

Estructura

$map-name: (
  key1: value1,
  key2: value2,
  key3: value3
);

Ejemplo 1

HTML

 <div class="social-buttons">
    <a href="#" class="social-button-facebook">Facebook</a>
    <a href="#" class="social-button-twitter">Twitter</a>
    <a href="#" class="social-button-instagram">Instagram</a>
    <a href="#" class="social-button-linkedin">LinkedIn</a>
    <a href="#" class="social-button-youtube">YouTube</a>
  </div>

SCSS

// Definimos un mapa de redes sociales y sus colores
$redes-sociales: (
  facebook: #3b5998,
  twitter: #1da1f2,
  instagram: #c13584,
  linkedin: #0077b5,
  youtube: #c4302b,
);

// Aplicamos estilos a botones de redes sociales usando el mapa
@each $red-social, $color in $redes-sociales {
  .social-button-#{$red-social} {
    background-color: $color;
    padding: 12px 24px;
    color: white;
    text-transform: uppercase;
    margin-right: 10px;
    margin-bottom: 10px;
    border: 1px solid darken($color, 20%);
    border-radius: 4px;
    display: inline-block;
    text-decoration: none;

    &:hover {
      background-color: lighten($color, 10%);
    }
  }
}

Definimos un mapa $redes-sociales donde cada clave (facebook, twitter, instagram, linkedin, youtube) está asociada a un color específico en formato hexadecimal.

Utilizamos @each para iterar sobre las claves y valores del mapa. Para cada iteración, generamos una clase de estilo de botón (social-button-{red-social}) donde {red-social} es el nombre de la red social.

Aplicamos estilos como background-color, color, padding, border, y border-radius utilizando las variables $color y $red-social interpoladas.

@mixin

---

Un mixin en SASS es una forma de reutilizar y organizar bloques de código CSS para poder aplicarlos fácilmente en varios lugares de tu código. Funciona como una especie de función en la que defines un conjunto de estilos que puedes incluir en otros estilos CSS cuando los necesites.

Estructura

@mixin nombre-del-mixin($parametro1, $parametro2, ...) {
  // Bloque de estilos CSS
}

@mixin nombre-del-mixin: Define el nombre del mixin.
$parametro1
$parametro2: Lista de parámetros opcionales que el mixin puede aceptar.

Ejemplo 1

HTML

 <div class="tarjeta">
    <h2>Tarjeta Normal</h2>
    <p>Contenido de la tarjeta normal.</p>
  </div>

  <div class="tarjeta-destacada">
    <h2>Tarjeta Destacada</h2>
    <p>Contenido de la tarjeta destacada.</p>
  </div>

SCSS

@mixin card($background-color, $border-radius) {
  background-color: $background-color;
  border-radius: $border-radius;
  width: 300px;
  padding: 20px;
  margin: 20px;
}

.tarjeta {
  @include card(#f0f0f0, 8px);
}

.tarjeta-destacada {
  @include card(#3498db, 4px);
}

Ejemplo 2

HTML

  <div class="button-container">
    <a href="#" class="button-primary">Primary Button</a>
    <a href="#" class="button-secondary">Secondary Button</a>
    <a href="#" class="button-danger">Danger Button</a>
    <a href="#" class="button-outline">Outline Button</a>
  </div>

SCSS

// Definimos un mixin para estilos de botones
@mixin button($bg-color, $text-color: white) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;

  &:hover {
    background-color: lighten($bg-color, 10%);
  }
}

// Aplicamos el mixin a diferentes variantes de botones
.button-primary {
  @include button(#3498db);
}

.button-secondary {
  @include button(#2ecc71);
}

.button-danger {
  @include button(#e74c3c);
}

.button-outline {
  @include button(transparent, #3498db);
}

@extend

---

La instrucción @extend en Sass permite compartir reglas de estilo entre diferentes selectores. En lugar de duplicar código, puedes hacer que un selector herede las propiedades de otro.

Estructura

.base-selector {
  // propiedades comunes
}

.new-selector {
  @extend .base-selector;
  // propiedades adicionales
}

Ejemplo 1

HTML

    <div>
        <button class="boton">Botón</button>
        <button class="boton boton--aceptar">Aceptar</button>
        <button class="boton boton--cancelar">Cancelar</button>
    </div>

SCSS

.boton {
  width: 200px;
  height: 50px;
  background-color: white;
  text-align: center;
  color: black;
  border-radius: 20px;
  border: 1px solid black;
}

.boton--aceptar {
  @extend .boton;
  background-color: green;
  color: yellow;
}

.boton--cancelar {
  @extend .boton;
  background-color: red;
  color: yellow;
}

Diferencia entre extends y mixin

---

Extends

Para compartir fragmentos de estilos idénticos entre componentes.

mixins

Para reutilizar fragmentos de estilos que puedan tener un resultado diferente en cada lugar donde los declaremos.