Principios Fundamentales

El desarrollo con SASS debe regirse por la simplicidad. Priorizar un código limpio y legible facilita el mantenimiento a largo plazo. Aunque existen reglas estructuradas, el pragmatismo debe prevalecer: si una solución rompe una regla pero mejora significativamente la claridad del proyecto, es aceptable aplicarla.

Formato y Estructura del Código

Mantener una estética uniforme es crucial cuando varios desarrolladores colaboran en una misma hoja de estilos. Se recomiendan las siguientes pautas de estilo:

• Utilizar dos espacios para la indetnación en lugar de tabuladores.
• Limitar la longitud de las líneas a un máximo de 80 caracteres.
• Declarar las reglas de CSS en múltiples líneas de forma clara.
• Usar espacios en blanco de manera estratégica para separar bloques lógicos.

// Estructura recomendada
.contenedor-principal {
 display: flex;
 margin: 0 auto;
 padding: 1.5rem;
}

// Estructura no recomendada
.contenedor-principal {
   display: flex; margin: 0 auto;
   padding: 1.5rem;
}

Manejo de Cadenas de Texto

Es fundamantal definir la codificación al inicio del archivo principal mediante @charset 'utf-8';.

En SASS, las cadenas de texto deben estar contenidas entre comillas (simples o dobles). Esto evita que nombres de colores sean interpretados como valores hexadecimales y mejora la compatibilidad con resaltadores de sintaxis.

// Correcto
$tema-visual: 'oscuro';

// Incorrecto
$tema-visual: oscuro;

Sin embargo, los identificadores específicos de CSS como serif, sans-serif o initial no deben llevar comillas, ya que CSS los interpreta como identificadores propios y no como texto plano.

// Uso correcto de identificadores
$familia-fuente: serif;

// Uso de URL con comillas
.banner-hero {
 background-image: url('../assets/img/hero-bg.png');
}

Tratamiento de Números y Unidades

Al trabajar con valores numéricos, se deben seguir reglas de precisión para mantener la consistencia:

• Ceros en decimales: Incluir siempre el cero antes del punto decimal (0.5) y omitir ceros innecesarios al final (2 en lugar de 2.0).
• Valores nulos: No añadir unidades al valor 0 cuando se refiere a distancias (0 en lugar de 0px), excepto en propiedades de tiempo como transition-delay.

// Valores numéricos limpios
.tarjeta {
 opacity: 0.75;
 border-width: 0;
 width: (100% / 4);
}

Para maniuplar unidades de forma programática:

• Agregar unidad: Multiplicar el número por 1 unidad (ej. $valor * 1px).
• Eliminar unidad: Dividir el valor por 1 unidad del mismo tipo (ej. $medida / 1px).

$base: 20;

// Conversión correcta
$ancho-final: $base * 1rem;

// Extracción de valor numérico
$valor-puro: $ancho-final / 1rem;

Gestión de Colores

SASS ofrece herramientas potentes para la manipulación cromática. Se recomienda un orden de preferencia para definir colores según su facilidad de edición y comprensión:

1. HSL: Es el más intuitivo para humanos, permitiendo ajustar tono, saturación y brillo fácilmente.
2. RGB: Útil cuando se trabaja con componentes de luz directos.
3. Hexadecimal: Preferiblemente en minúsculas y utilizando la forma abreviada si es posible (ej. #fff).

.boton-accion {
 // Preferido: HSL
 background-color: hsl(210, 80%, 45%);
 
 // Aceptable: RGB
 color: rgb(255, 255, 255);
 
 // Solo si es necesario: Hexadecimal corto
 border: 1px solid #ccc;
}

Se debe evitar el uso de nombres de colores predefinidos (como red o blue), ya que su representación exacta puede variar o resultar menos precisa en esquemas de diseño complejos.