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.

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

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.

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

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

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

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

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

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

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

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