BlogIntroducción a SCSS

Introducción a SCSS

Variables, anidamiento, mixins y funciones.

Documento 1 de 1 2 secciones

1 Variables y Anidamiento

sql
// Variables
$color-primario: #04d9d9;
$color-secundario: #f1683f;
$fuente-base: 'Inter', sans-serif;
$borde-radio: 8px;

// Anidamiento
.tarjeta {
  background: white;
  border-radius: $borde-radio;
  padding: 20px;

  // Selector hijo anidado
  .titulo {
    font-size: 1.5rem;
    color: $color-primario;
  }

  // Pseudo-clase anidada con &
  &:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }

  // Modificador BEM con &
  &--destacada {
    border: 2px solid $color-primario;
  }
}

SCSS (Sassy CSS) es un preprocesador CSS que extiende CSS con características de programación: variables, anidamiento, mixins, funciones, herencia y más. El código SCSS se compila a CSS estándar antes de llegar al navegador.

Las variables SCSS empiezan con $. A diferencia de las variables CSS nativas (--nombre), las variables SCSS solo existen en tiempo de compilación y no pueden cambiarse en runtime con JavaScript.

2 Mixins y Funciones

javascript
// Mixin: bloque de CSS reutilizable
@mixin flex-centrar {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin responsive($breakpoint) {
  @if $breakpoint == tablet {
    @media (max-width: 768px) { @content; }
  } @else if $breakpoint == movil {
    @media (max-width: 480px) { @content; }
  }
}

// Uso de mixins
.hero {
  @include flex-centrar;
  height: 100vh;

  @include responsive(tablet) {
    height: 60vh;
  }
}

// Función SCSS
@function rem($px) {
  @return #{$px / 16}rem;
}

h1 { font-size: rem(32); }  // 2rem

Comentarios

Sé el primero en comentar.

Deja tu comentario

Volver al blog deybidev.com