Desarrollo de Páginas Web con SAS para Principiantes

¿Qué es SAS y por qué es esencial para el desarrollo web?

Comencemos con SAS, conocido por sus siglas en inglés como Syntactically Awesome Style Sheet, un preprocesador de CSS que revoluciona la manera en que desarrollamos estilos. Este curso es ideal para quienes ya tienen un conocimiento básico de HTML y CSS y buscan mejorar su habilidad en el desarrollo web. SAS te permitirá ahorrar tiempo y te ayudará a mantener un código CSS más ordenado y modular.

¿Cuáles son las características principales de SAS?

SAS ofrece herramientas que no se encuentran en CSS regular y aporta una serie de beneficios que optimizan tanto el desarrollo como el mantenimiento del código:

• Soporte para modularizar estilos: Utiliza la regla @use para gestionar estilos de forma modular.
• Variables: Te permiten almacenar tipos de datos como colores, simplificando cambios futuros.
• Mixins: Funcionan como funciones que aceptan parámetros para reutilizar estilos de manera efectiva.
• Selectores anidados: Mejoran la legibilidad del código haciéndolo más mantenible.
• Herencia: Permite compartir estilos entre selectores.

¿Qué diferencias existen entre los tipos de sintaxis de SAS?

SAS es flexible y admite dos tipos de sintaxis: .sass y .scss, ambas con particularidades que las adaptan a diferentes necesidades y gustos de los desarrolladores.

1. SAS (.sass): Sintaxis indentada que elimina el uso de llaves y punto y coma. Es más concisa y visualmente limpia para quienes prefieren este estilo.

   $font-stack: Helvetica, sans-serif
   $primary-color: #333
   
   body
     font: 100% $font-stack
     color: $primary-color
   

2. SCSS (.scss): Sintaxis tradicional que conserva las llaves y punto y coma, ideal si ya te encuentras familiarizado con el formato estándar de CSS.

   $font-stack: Helvetica, sans-serif;
   $primary-color: #333;
   
   body {
     font: 100% $font-stack;
     color: $primary-color;
   }
   

¿Cómo aplicamos SAS en el proyecto Ecotore?

En este curso trabajarás en "Ecotore", una landing page para un catálogo de productos ecológicos. Este proyecto es el terreno ideal para aplicar tus habilidades mejoradas de CSS utilizando SAS. Desde el diseño en Figma hasta la implementación en código, cada paso está diseñado para consolidar tus conocimientos.

¿Qué necesitamos incluir en nuestro diseño de Figma?

El diseño de tu proyecto en Figma contempla varios elementos y estilos que deberás recrear y personalizar con SAS:

• NavBar: Incluye el logo, iconos de perfil, wishlist, y carrito de compras.
• Sección "¿Por qué nosotros?": Muestra una galería con animaciones y un mapa de ubicación.
• Colores y tipografía: Usa una paleta de colores predefinida y la tipografía IBM Plex Sans en sus variantes Medium, Regular y Bold.

¿Cuál es el enfoque en el diseño responsivo?

Además de un diseño atractivo, el proyecto debe funcionar bien en diversos dispositivos. Figma nos brinda una versión responsiva que te enseñará la relevancia del diseño adaptable. Desde ajustes en tamaños de fuente hasta el uso de flexbox para distribuir elementos, el enfoque es optimizar la experiencia del usuario en todas las plataformas.

Próximos pasos en tu aprendizaje de SAS

Te invito a adentrarte en los recursos adicionales para enriquecer tu comprensión y expandir tus capacidades. La práctica constante y el uso de SAS en proyectos reales te posicionarán un paso adelante en el mundo del desarrollo web. Con paciencia y entusiasmo, dominarás el arte del estilismo al siguiente nivel. Nos encontramos en la próxima clase para preparar tu entorno de desarrollo y poner en marcha tu proyecto. ¡Te espero allá!