AAAAAAA YA SALIÓ
Esperé con muchísimas ansias que Platzi sacara un curso para aprender SASS, apenas lo vi en Lanzamientos lo agendé ❤
El proyecto me encantó!! Súper emocionada por incluirlo en mi portfolio aplicando SASS 💚
Conociendo SASS
¿Qué es SASS y en qué se diferencia de otros preprocesadores?
¿Cómo funcionan los preprocesadores? Ventajas de utilizar uno
Instalación y configuración del entorno de trabajo
Anatomía de un proyecto de SASS e instalación y configuración del entorno de trabajo
Reglas y uso
Estructura de la hoja de estilos y variables
Uso de selectores, scope de las variables y shadowing
Creando la estructura del proyecto
At Rules: CSS y nesting
Quiz: Reglas y uso
Expresiones
Expresiones: Literales y Operaciones
Quiz: Expresiones
Proyecto: sección main
Creando la estructura de la sección main
Quiz: Proyecto: sección main
Herencia en SASS
¿Qué es la herencia y cómo funciona en SASS?
Creando la estructura de la sección de Cuidado de la Salud y Decoración del Hogar
Usando flexbox en la sección de Cuidado de la Salud y Decoración del Hogar
Quiz: Herencia en SASS
Mixins
¿Qué es un mixin en CSS?
Implementando mixins en el proyecto
Quiz: Mixins
Funciones
Creación de nuestras propias funciones
Proyecto
Creando la estructura de la sección '¿Por qué nosotros?'
Creando la estructura de la sección Galería de Estilos
Creando la estructura de la sección Mapa y Footer
Quiz: Proyecto
Deploy
Presentación de Github pages y deploy
Quiz: Deploy
Extras
Aprende a instalar y configurar Sass mediante Node.js
Resources
Transcript
What is SAS and why is it essential for web development?
Let's start with SAS, Syntactically Awesome Style Sheet, a CSS preprocessor that revolutionizes the way we develop styles. This course is ideal for those who already have a basic knowledge of HTML and CSS and are looking to improve their web development skills. SAS will save you time and help you maintain a more orderly and modular CSS code.
What are the main features of SAS?
SAS offers tools not found in regular CSS and provides a number of benefits that streamline both development and code maintenance:
- Support for modularizing styles: Use the
@userule to manage styles in a modular fashion. - Variables: Allow you to store data types such as colors, simplifying future changes.
- Mixins: Function as functions that accept parameters to effectively reuse styles.
- Nested selectors: Improve code readability making it more maintainable.
- Inheritance: Allows sharing styles between selectors.
What are the differences between SAS syntax types?
SAS is flexible and supports two types of syntax: .sass and .scss, both with particularities that adapt them to different needs and tastes of developers.
-
SAS (.sass): Indented syntax that eliminates the use of braces and semicolons. It is more concise and visually cleaner for those who prefer this style.
$font-stack: Helvetica, sans-serif$primary-color: #333 body font: 100% $font-stack color: $primary-color -
SCSS (.scss): Traditional syntax that preserves braces and semicolons, ideal if you are already familiar with standard CSS formatting.
$font-stack: Helvetica, sans-serif;$primary-color: #333; body { font: 100% $font-stack; color: $primary-color;}
How do we apply SAS in the Ecotore project?
In this course you will work on "Ecotore", a landing page for a catalog of organic products. This project is the ideal ground to apply your enhanced CSS skills using SAS. From design in Figma to implementation in code, each step is designed to consolidate your knowledge.
What do we need to include in our Figma design?
The design of your Figma project includes several elements and styles that you will need to recreate and customize with SAS:
- NavBar: Includes logo, profile icons, wishlist, and shopping cart.
- Why Us" section: Displays a gallery with animations and a location map.
- Colors and typography: Uses a predefined color palette and IBM Plex Sans typography in Medium, Regular and Bold variants.
What is the focus on responsive design?
In addition to an attractive design, the project must work well on different devices. Figma provides us with a responsive version that will show you the relevance of adaptive design. From adjustments in font sizes to the use of flexbox to distribute elements, the focus is on optimizing the user experience on all platforms.
Next steps in your SAS learning
I invite you to delve into additional resources to enrich your understanding and expand your capabilities. Constant practice and use of SAS on real projects will position you a step ahead in the world of web development. With patience and enthusiasm, you will master the art of styling to the next level. Meet me at the next class to prepare your development environment and get your project up and running - I'll see you there!
Contributions 44
Questions 3
Sort by:
🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀
Buenas vibra para todo el que lucha por un mejor Día
Características de SASS
.
- Modularización: Permite dividir los estilos en módulos más pequeños y manejables para simplificar el proceso de desarrollo y mantenimiento.
. - Variables: Permite definir variables para almacenar valores reutilizables en un archivo SASS, lo que facilita la creación y el mantenimiento de hojas de estilo.
. - Mixins: Permite definir mixins, que son bloques de código reutilizables que se pueden incluir en diferentes partes del CSS. Los mixins pueden contener variables y lógica, lo que facilita la creación de estilos más complejos y dinámicos.
. - Selectores Anidados: Se pueden anidar selectores y reglas de estilo, lo que ayuda a organizar y estructurar el CSS de manera más intuitiva.
. - Herencia: SASS permite la herencia de estilos entre selectores, lo que puede simplificar la creación y el mantenimiento de hojas de estilo.
. - Funciones: Admite funciones que permiten realizar cálculos y operaciones complejas en el CSS. Las funciones se pueden utilizar para definir valores dinámicos, como la altura o el ancho de un elemento en función de otros valores.
. - Importación: SASS admite la importación de archivos CSS y SASS, lo que facilita la organización y el mantenimiento de hojas de estilo.
. - Directivas de control de flujo: SASS admite directivas de control de flujo, como if/else y for, que permiten realizar operaciones condicionales y repetitivas en el CSS.
. - Operaciones aritméticas: SASS admite operaciones aritméticas, lo que permite realizar cálculos matemáticos directamente en el CSS.
Diferencias entre .saas y .scss
.
Sass es flexible y compatible con el CSS tradicional, por lo tanto, cuando trabajamos con él tenemos la opción de utilizar dos diferentes extensiones
.
- .SASS = Utiliza una sintaxis identada, quitando el uso de
{ }y el ; tras cada declaración.
. - .SCSS = Utiliza sintaxis tradicional de CSS, incluyendo el uso de
{ }y el;tras cada declaración
.
Ya te di una estrella y estoy descargando el proyecto en Git Hub!
Tenia tiempo que queria aprender Sass así que no hay excusa para comenzar hoy ✨
El curso se ve excelente, muy buena teacher y el proyecto también muy bueno!
Por fin llegó, estaba esperando este curso con ganas! 😄
Chicos, les paso las notas de la clase! Saludos desde Dublin, Irlanda.
¿Qué es Sass?
Sass es la abreviación de “Syntatically Awesome Stylesheets” y es un preprocesador de CSS que se utiliza para trabajar los estilos de un proyecto agregando funcionalidades con las que no cuenta CSS. A diferencia de otros preprocesadores está basado en el lenguaje de programación Ruby.
.
Algunas de las caracteristicas de Sass son
.
-
Sass cuenta con soporte para modularizar estilos, haciendo de la regla “use”
-
Usa variables, que sirven para almacenar un tipo de dato
-
Usa mixins que se asemejan a las funciones, porque reciben parametros de entrada.
-
Usa selectores anidados, que nos permiten ser más concisos a la hora de escribir nuestro código y hacerlo más mantenible.
-
La herencia nos permite compartir propiedades entre selectores
.
Sass es compatible con el CSS tradicional, por tanto, cuando trabajamos con él, tendremos la opción de utilizar dos diferentes extensiones. Estas son .sass y .scss,
.
.Sass utiliza una sintaxis identada, que elimina el uso de los corchetes ({ }) y el punto y coma, obligatorios en el CSS tradicional
.
Por su parte, scss utiliza la sintaxis tradicional de CSS, incluyendo el el uso de los corchetes y el punto y coma.
Justo en el momento en que estaba apañanandomelas con la documentacion de sass para trabajar con el 🥴🥴🥴🥴
Este curso era muy muy esperado en Platzi. Gracias a Platzi y a Ana María por hacerlo posible 🙏🏼❤️
Poooorfin un curso de SASS!! o almenos el primero que sacan a esta fecha jaja
Muy buen proyecto ☺️
Sería útil que las rutas a las que agreguen cursos se actualicen, ya tenía la ruta terminada de html y css por lo que no me di cuenta de este curso.
Las rutas deberías cambiar de 100% y obligar a pasar de nuevo el examen y los nuevos cursos para volver obtener el 100%
Saludos.
Tiene toda la pinta este curso ♥ Muchas gracias por nuevos cursos! ♥
Tenía muchas ganas de aprender usar SASS 😸
“Your benevolent gesture has left an indelible impression of gratitude upon me, Ana María Díaz Solorio.”
WOW!
Todo, todo eso vamos a aprender. 😨
Yahoo!! 😎
Podríamos definir los preprocesadores CSS como herramientas que posibilitan traducir hojas de estilo comunes a un código estándar y reconocible por los navegadores [web](https://www.arsys.es/pagina-web/crear). Estas herramientas disponen de utilidades que no están en el lenguaje CSS y, por tanto, no las interpretan los navegadores directamente, como pueden ser variables, anidación de selectores, funciones (mixins), etc. Creando un preprocesador lo que conseguimos es economizar tiempo, ya que escribimos menos código. Además, su mantenimiento es fácil y resulta más comprensible, debido básicamente a su optimizada organización.
Por el contrario, crear un preprocesador implica aprender un nuevo lenguaje y escribir código poco común, que debe ser compilado en CSS y que afecta al flujo de desarrollo. Este código, que no entiende el navegador, deberemos traducirlo antes de llevar un sitio web a producción. Por suerte para nosotros, existen alternativas para su optimización y traducción que harán que ahorremos tiempo.
## ¿Por qué Sass?
Podríamos escoger otros preprocesadores, como Less o Stylus, ya que todos al final ofrecen las mismas utilidades, pero Sass es el preprocesador más utilizado y demandado por la comunidad de desarrolladores. Varios frameworks como [Bootstrap](https://www.arsys.es/blog/bootstrap-responsive) lo utilizan y, además, cabe la posibilidad de que podamos heredar proyectos que lo usen, siendo de enorme beneficio aprender este preprocesador.
### ¿Qué es SASS?
SASS (**Syntactically Awesome Stylesheets**) es un **preprocesador de CSS** que permite escribir estilos de manera más eficiente y organizada. Añade características como **variables, anidación, mixins, herencia y funciones**, facilitando el mantenimiento y la reutilización del código.
SASS tiene dos sintaxis:
1. **SASS** (sintaxis antigua): Usa indentación en lugar de llaves `{}` y punto y coma `;`.
2. **SCSS** (Sassy CSS): Similar a CSS, pero con las mejoras de SASS. Es la sintaxis más usada.
Tuve momento en los que dude por que habían cosas que no entendía, pero super el curso, Gracias profe!
Sí, en el mismo proyecto se pueden usar archivos con extensiones .sass y .scss sin conflicto. Ambos son sintaxis del preprocesador SASS, y puedes mezclar ambos tipos de archivos en tu proyecto. Sin embargo, es importante mantener una organización clara de los estilos y seguir las buenas prácticas para evitar confusiones. Utiliza .scss para un estilo más tradicional de CSS si prefieres las llaves y punto y coma, y .sass para una sintaxis más simplificada y limpia.
![]()![]()
![]()
woOow estaba dudando si dejar este curso para despues de terminar toda la ruta de HTML & CSS pero se nota mucha la calidad del curso, Excelente!!
Genial…!
@Coding_byanna soy tu fan!! ❤️
Me encanta el tema de los preprocesadores, aunque aun no manejo muy bien CSS, creo que valdrá mucho la pena este curso.
no sonido experimento en este curso
No estan los recursos de la clase!
Me siento muy emocionado de dar el siguiente paso en mi camino a convertirme en desarrollador frontend. Espero aprender esta nueva herramienta que si bien ya había escuchado hablar de ella, no había tenido la oportunidad de probarla.
Las variables nos sirven para almacenar datos, por ejemplo los colores. Los mixins son parecidos a las funciones, ya que reciben parámetros de entrada.
Características de SASS - Modularización: Permite dividir los estilos en módulos más pequeños y manejables para simplificar el proceso de desarrollo y mantenimiento. -Variables: Permite definir variables para almacenar valores reutilizables en un archivo SASS, lo que facilita la creación y el mantenimiento de hojas de estilo
Características de SASS - Modularización: Permite dividir los estilos en módulos más pequeños y manejables para simplificar el proceso de desarrollo y mantenimiento. -Variables: Permite definir variables para almacenar valores reutilizables en un archivo SASS, lo que facilita la creación y el mantenimiento de hojas de estilo
Características de SASS - Modularización: Permite dividir los estilos en módulos más pequeños y manejables para simplificar el proceso de desarrollo y mantenimiento. -Variables: Permite definir variables para almacenar valores reutilizables en un archivo SASS, lo que facilita la creación y el mantenimiento de hojas de estilo
Características de SASS - Modularización: Permite dividir los estilos en módulos más pequeños y manejables para simplificar el proceso de desarrollo y mantenimiento. -Variables: Permite definir variables para almacenar valores reutilizables en un archivo SASS, lo que facilita la creación y el mantenimiento de hojas de estilo
Características de SASS - Modularización: Permite dividir los estilos en módulos más pequeños y manejables para simplificar el proceso de desarrollo y mantenimiento. -Variables: Permite definir variables para almacenar valores reutilizables en un archivo SASS, lo que facilita la creación y el mantenimiento de hojas de estilo
Características de SASS - Modularización: Permite dividir los estilos en módulos más pequeños y manejables para simplificar el proceso de desarrollo y mantenimiento. -Variables: Permite definir variables para almacenar valores reutilizables en un archivo SASS, lo que facilita la creación y el mantenimiento de hojas de estilo -Mixins: Permite definir mixins, que son bloques de código reutilizables que se pueden incluir en diferentes partes del CSS. Los mixins pueden contener variables y lógi
Características de SASS - Modularización: Permite dividir los estilos en módulos más pequeños y manejables para simplificar el proceso de desarrollo y mantenimiento. -Variables: Permite definir variables para almacenar valores reutilizables en un archivo SASS, lo que facilita la creación y el mantenimiento de hojas de estilo -Mixins: Permite definir mixins, que son bloques de código reutilizables que se pueden incluir en diferentes partes del CSS. Los mixins pueden contener variables y lógi
Características de SASS - Modularización: Permite dividir los estilos en módulos más pequeños y manejables para simplificar el proceso de desarrollo y mantenimiento. -Variables: Permite definir variables para almacenar valores reutilizables en un archivo SASS, lo que facilita la creación y el mantenimiento de hojas de estilo -Mixins: Permite definir mixins, que son bloques de código reutilizables que se pueden incluir en diferentes partes del CSS. Los mixins pueden contener variables y lógi
🔥 Importante
Si te quedaste con ganas de ver más, te dejo estos enlaces con cursos gratuitos, probé el primero y me gustó y ahora mismo voy a hacer el segundo curso hecho por la gente de código facilito ✨😃✌
Estos son los apuntes que tomé del primer curso gratuito, espero te sean de utilidad!
siiiii justo lo necesitaba, me esta ayudando mucho
Se ve BRUTAL el curso! Es justo lo que estaba buscando para fortalecer mi perfil.
Want to see more contributions, questions and answers from the community?