DEV Community

Fernando
Fernando

Posted on

Sass II - Funciones avanzadas

#spanish

Sass II

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

@if

Ejemplo 1

HTML

<button class="button">Ver más</button>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

@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> { ... }
Enter fullscreen mode Exit fullscreen mode

Ejemplo 1

HTML

<div class="botones-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>
Enter fullscreen mode Exit fullscreen mode

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%);
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

@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
);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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%);
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

@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>
Enter fullscreen mode Exit fullscreen mode

SCSS

@mixin card($background-color, $border-radius) {
  background-color: $background-color;
  border-radius: $border-radius;
  width: 300px;
  padding: 20px;
  margin: 20px;
}
Enter fullscreen mode Exit fullscreen mode 
.tarjeta {
  @include card(#f0f0f0, 8px);
}

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

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

@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
}
Enter fullscreen mode Exit fullscreen mode 
.new-selector {
  @extend .base-selector;
  // propiedades adicionales
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)

Read next

raajaryan profile image

Comprehensive React.js Cheatsheet for Developers

Deepak Kumar -

mauricebrg profile image

Going on an Industry Quest: Manufacturing and Auto

Maurice Borgmeier -

devshi profile image

Advanced JavaScript Performance Optimization: Learn Web Development

Devshi Bambhaniya -

teleglobal profile image

Unlocking the Cloud: The Vital Role of Cloud Consulting in Today's Digital Realm

Teleglobal International -