🎨 FemPalette

Generador de Variables SCSS

🔍 ¿Qué estás viendo?

Este generador te muestra en tiempo real cómo las variables SASS simplifican la gestión de colores en tus proyectos.

Primary $primary Secondary $secondary Accent $accent Neutral $neutral

Vista previa

Este componente usa las variables que definiste arriba

📄 SCSS generado:

$primary: #821ad4;
$secondary: #ea4f33;
$accent: #4737bb;
$neutral: #ffffff;
$on-primary: get-contrast($primary);
$on-secondary: get-contrast($secondary);
$on-accent: get-contrast($accent);

📚 SASS: Lleva tu CSS al siguiente nivel

🔶 ¿Qué es SASS?

SASS es un preprocesador de CSS que te permite usar variables, funciones, anidación y más características que CSS puro no soporta.

Variables en SASS:

// En lugar de repetir colores
.header { background-color: #4737bb; }
.button { border-color: #4737bb; }

// Usa variables
$color-primario: #4737bb;
.header { background-color: $color-primario; }
.button { border-color: $color-primario; }

🔶 Anidación

Refleja la estructura de tu HTML en tu CSS:

nav {
  background: $primary;
  
  ul {
    list-style: none;
    
    li {
      padding: 0.5rem;
      
      a {
        color: $neutral;
        text-decoration: none;
        
        &:hover {
          color: $accent;
        }
      }
    }
  }
}

🔶 Mixins - Reutiliza código

Los mixins te permiten reutilizar bloques de código con parámetros:

@mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

.contenedor {
  @include flex-center(column);
}

🔶 Instalación rápida

# Instalar SASS globalmente
npm install -g sass

# Compilar un archivo
sass style.scss style.css

# Modo watch (auto-compilación)
sass --watch style.scss:style.css

💡 Ejemplos Prácticos

🎨 Sistema de Colores Completo

// _colors.scss
$colors: (
  primary: #821ad4,
  secondary: #ea4f33,
  accent: #4737bb,
  neutral: #ffffff,
  success: #28a745,
  warning: #ffc107,
  error: #dc3545
);

@function color($name) {
  @return map-get($colors, $name);
}

// Uso
.button-primary {
  background-color: color(primary);
  color: color(neutral);
}

📱 Breakpoints Responsivos

// _breakpoints.scss
$breakpoints: (
  mobile: 480px,
  tablet: 768px,
  desktop: 1024px,
  wide: 1200px
);

@mixin media($breakpoint) {
  @media (min-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}

// Uso
.container {
  width: 100%;
  
  @include media(tablet) {
    max-width: 768px;
  }
  
  @include media(desktop) {
    max-width: 1024px;
  }
}

🧩 Arquitectura 7-1

// main.scss
@use 'abstracts/variables';
@use 'abstracts/functions';
@use 'abstracts/mixins';

@use 'base/reset';
@use 'base/typography';

@use 'layout/header';
@use 'layout/footer';
@use 'layout/sidebar';

@use 'components/button';
@use 'components/card';

@use 'pages/home';
@use 'pages/about';

✨ Tips Pro de SASS

🚫 No anides más de 3 niveles de profundidad
📁 Usa arquitectura modular (7-1 pattern)
🔧 Aprovecha las funciones built-in: lighten(), darken(), mix()
🎯 Usa @use en lugar de @import (más moderno)
🎨 Combina SASS con CSS Custom Properties para máxima flexibilidad