Preprocesadores CSS

// Variables SASS ($prefijo)
// Se resuelven en compilacion, NO existen en el CSS final

// Colores
$color-primary: #3b82f6;
$color-secondary: #8b5cf6;
$color-success: #22c55e;
$color-danger: #ef4444;

// Tipografia
$font-sans: 'Inter', system-ui, sans-serif;
$font-mono: 'JetBrains Mono', monospace;
$font-size-base: 1rem;   // 16px
$font-size-lg: 1.25rem; // 20px

// Espaciado
$space-xs: 0.25rem;
$space-sm: 0.5rem;
$space-md: 1rem;
$space-lg: 1.5rem;
$space-xl: 3rem;

// Layout
$container-max: 1280px;
$sidebar-width: 280px;
$border-radius: 0.5rem;

// Breakpoints
$bp-sm: 640px;
$bp-md: 768px;
$bp-lg: 1024px;
$bp-xl: 1280px;

// Uso
.card {
    background: $color-primary;
    font-family: $font-sans;
    font-size: $font-size-base;
    padding: $space-lg;
    border-radius: $border-radius;
}

// SASS soporta operaciones matematicas
$container-padding: $space-lg * 2; // 3rem
$half-width: $container-max / 2;   // 640px

// Nesting basico
// El & referencia al selector padre
.navbar {
    display: flex;
    align-items: center;
    padding: $space-md $space-lg;

    & .logo {
        flex-shrink: 0;
        width: 120px;
    }

    & .nav-links {
        display: flex;
        gap: $space-md;
        list-style: none;
    }

    // & tambien funciona para pseudo-elementos y states
    &:hover {
        background: rgba(0, 0, 0, 0.05);
    }

    &::after {
        content: '';
        display: block;
        height: 1px;
        background: $color-primary;
    }
}
// CSS generado:
// .navbar { display: flex; ... }
// .navbar .logo { flex-shrink: 0; ... }
// .navbar:hover { background: rgba(0,0,0,0.05); }
// .navbar::after { ... }

// Nesting con media queries (muy util)
.card {
    padding: $space-md;

    @media (min-width: $bp-md) {
        padding: $space-lg;
    }

    @media (min-width: $bp-lg) {
        padding: $space-xl;
    }
}
// CSS generado:
// .card { padding: 1rem; }
// @media (min-width: 768px) { .card { padding: 1.5rem; } }
// @media (min-width: 1024px) { .card { padding: 3rem; } }

// REGLA: max 3 niveles de anidamiento
// MAL (5 niveles - specificity hell):
// .page .section .container .card .card-body .title { }

// BIEN (2 niveles, clases atomicas):
.card {
    &-body {
        // .card-body
        & .title {
            // .card-body .title
        }
    }
}

// Definir un mixin con @mixin
@mixin flex-center($direction: row, $gap: 1rem) {
    display: flex;
    flex-direction: $direction;
    align-items: center;
    justify-content: center;
    gap: $gap;
}

// Usar con @include
.navbar {
    @include flex-center(row, 1.5rem);
}

.card-content {
    @include flex-center(column, 0.75rem);
}

// ============================================
// Mixin para responsive (mucho mas limpio)
// ============================================
@mixin respond-to($breakpoint) {
    @if $breakpoint == 'sm' {
        @media (min-width: $bp-sm) { @content; }
    } @else if $breakpoint == 'md' {
        @media (min-width: $bp-md) { @content; }
    } @else if $breakpoint == 'lg' {
        @media (min-width: $bp-lg) { @content; }
    } @else if $breakpoint == 'xl' {
        @media (min-width: $bp-xl) { @content; }
    }
}

// Uso: mucho mas legible que escribir el breakpoint completo
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: $space-md;

    @include respond-to('md') {
        grid-template-columns: repeat(2, 1fr);
    }

    @include respond-to('lg') {
        grid-template-columns: repeat(3, 1fr);
    }
}

// ============================================
// Mixin para centrar (el clasico)
// ============================================
@mixin center-both {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero {
    @include center-both;
    min-height: 100vh;
}

// ============================================
// Mixin con @content (bloque de contenido)
// ============================================
@mixin card-base($padding: $space-lg) {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: $border-radius;
    padding: $padding;

    @content; // Se inyecta contenido adicional aqui
}

.card {
    @include card-base {
        // Todo esto se inserta dentro del mixin
        &:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
    }
}

// ============================================
// Funciones nativas de SASS
// ============================================

// Funciones de color
$primary: #3b82f6;
$primary-light: lighten($primary, 20%);    // #74a8f8
$primary-dark: darken($primary, 15%);      // #2563eb
$primary-transparent: rgba($primary, 0.5); // rgba(59, 130, 246, 0.5)
$complementary: complement($primary);        // #f6823b
$desaturated: desaturate($primary, 30%);      // #6d8fbf

// Funciones matematicas
$column-width: calc(100% / 3);     // 33.33%
$gutter-total: $space-md * 3;       // 3rem
$total: ceil(4.3);                  // 5 (redondeo hacia arriba)
$half: floor(4.7);                  // 4 (redondeo hacia abajo)
$random: random(100);               // Numero aleatorio entre 0 y 100

// Funciones de strings
$selector: to-upper-case(card);     // CARD
$class-name: unquote($variable);   // Convierte string a tipo sin comillas

// ============================================
// Funciones custom con @function
// ============================================

// Convertir px a rem
@function to-rem($pixels) {
    @return ($pixels / 16px) * 1rem;
}

h1 { font-size: to-rem(32px); }  // 2rem
h2 { font-size: to-rem(24px); }  // 1.5rem

// Generar un ancho fluido con clamp
@function fluid-size($min, $max, $vw-factor: 5) {
    @return clamp($min, #{$vw-factor}vw, $max);
}

.hero-title {
    font-size: fluid-size(2rem, 4rem);
}

// Calcular z-index en capas
@function z($layer) {
    $z-layers: (
        'base': 0,
        'dropdown': 100,
        'sticky': 200,
        'fixed': 300,
        'modal-backdrop': 400,
        'modal': 500,
        'toast': 600,
    );
    @return map-get($z-layers, $layer);
}

.header     { z-index: z('fixed'); }          // 300
.modal      { z-index: z('modal'); }          // 500
.toast      { z-index: z('toast'); }          // 600

// Generar color alpha
@function alpha($color, $opacity) {
    @return rgba($color, $opacity);
}

.overlay {
    background: alpha(#000000, 0.5); // rgba(0, 0, 0, 0.5)
}

// ============================================
// Estructura de archivos SASS
// ============================================
//
// scss/
//   _variables.scss    -- Variables globales
//   _mixins.scss       -- Mixins globales
//   _functions.scss    -- Funciones custom
//   _reset.scss        -- Reset/normalize
//   _base.scss         -- Estilos base (tipografia, links)
//   _layout.scss       -- Layout (grid, containers)
//   components/
//     _buttons.scss    -- Botones
//     _cards.scss      -- Cards
//     _navbar.scss     -- Navegacion
//   pages/
//     _home.scss       -- Estilos especificos del home
//   main.scss          -- Archivo principal (importa todo)

// ============================================
// _variables.scss (partial)
// ============================================
$color-primary: #3b82f6;
$color-secondary: #8b5cf6;
$font-sans: 'Inter', system-ui, sans-serif;
$bp-md: 768px;

// ============================================
// _mixins.scss (partial)
// ============================================
@mixin respond-to($bp) {
    @media (min-width: $bp) { @content; }
}

// ============================================
// @forward: re-exportar variables/mixins
// ============================================
// En _variables.scss o un archivo _index.scss:
@forward 'variables';
@forward 'mixins';
@forward 'functions';

// Ahora quien importe este archivo obtiene todo

// ============================================
// @use: importar con namespace
// ============================================
// main.scss
@use 'variables' as vars;
@use 'mixins' as mx;

.card {
    background: vars.$color-primary;
    padding: vars.$space-lg;

    @include mx.respond-to(vars.$bp-md) {
        padding: vars.$space-xl;
    }
}

// Tambien se puede importar sin namespace:
@use 'variables' as *;

.card {
    background: $color-primary; // Sin prefijo
}

// ============================================
// @import (DEPRECADO - no usar)
// ============================================
// @import 'variables'; // NO USAR
// Problemas:
// - Variables globales contaminan el scope
// - Se carga multiples veces sin warning
// - Se deprecó en Dart Sass 1.33+
// Usa @use en su lugar

// Variables LESS (igual que CSS custom properties)
@color-primary: #3b82f6;
@font-sans: 'Inter', system-ui, sans-serif;

// Nesting (similar a SASS, usa & para el padre)
.navbar {
    display: flex;
    padding: 1rem;

    .logo {
        width: 120px;
    }

    &:hover {
        background: rgba(0, 0, 0, 0.05);
    }
}

// Mixins con .mixin-name()
.center-flex() {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    .center-flex(); // Sin @include, se llama directamente
}

// Mixins con parametros (igual que SASS)
.responsive(@min-width) {
    @media (min-width: @min-width) {
        .content();
    }
}

// Funciones matematicas (similar a SASS)
@container-width: (1200px / 3); // 400px

// Operaciones (similar)
@result: @color-primary + #333;
@double: 10px * 2; // 20px

// postcss.config.js — configuracion tipica

export default {
    plugins: [
        // 1. Autoprefixer: agrega vendor prefixes automaticamente
        // .card { gap: 1rem; }
        // => .card { -webkit-gap: 1rem; gap: 1rem; }
        require('autoprefixer')({
            overrideBrowserslist: ['> 1%', 'last 2 versions']
        }),

        // 2. postcss-preset-env: usa sintaxis futura de CSS hoy
        // Convierte @nest, :has(), color-mix(), etc. a CSS compatible
        require('postcss-preset-env')({
            stage: 3, // Nivel de estandar (0-4)
            features: {
                'nesting-rules': true,
                'is-pseudo-class': true,
            }
        }),

        // 3. cssnano: minifica el CSS para produccion
        // Solo en build de produccion, no en desarrollo
        ...(process.env.NODE_ENV === 'production'
            ? [require('cssnano')({ preset: 'default' })]
            : []),

        // 4. postcss-import: permite @import en CSS (como partials)
        require('postcss-import'),

        // 5. css-mqpacker: combina media queries iguales
        // (reduce el tamaño del CSS final)
        require('css-mqpacker')({
            sort: true
        }),
    ]
};

/* ============================================
   CSS Nativo 2024: lo que ya no necesita SASS
   ============================================ */

/* Variables: Custom Properties nativas */
:root {
    --color-primary: #3b82f6;
    --space-md: 1rem;
}

.card {
    background: var(--color-primary);
    padding: var(--space-md);
}

/* Nesting: @nest (Chrome 120+, Safari 17.2+) */
.card {
    padding: 1rem;

    & .title {
        font-size: 1.5rem;
    }

    &:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    @media (min-width: 768px) {
        padding: 2rem;
    }
}

/* Funciones: clamp(), min(), max() */
.container {
    width: min(90%, 1200px);
    font-size: clamp(1rem, 3vw, 2rem);
}

/* Colores: color-mix() */
.button {
    background: color-mix(in srgb, var(--color-primary) 80%, white);
}

/* Container Queries */
.card-wrapper {
    container-type: inline-size;
}

@container (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 150px 1fr;
    }
}

/* ============================================
   Conclusión: WebForge usa CSS puro
   ============================================
   Para un proyecto educativo como WebForge:
   - No hay build step (serve directo con Live Server)
   - CSS moderno cubre todas las necesidades
   - La simplicidad es un valor pedagogico
   - Los lectores aprenden CSS, no SASS

   SASS vale la pena cuando:
   - Proyecto grande (100+ componentes)
   - Equipo de multiples devs
   - Necesitas theming avanzado
   - Quieres mixins complejos
   - Ya tienes un build step (Vite, Webpack) */