Mi primer curso con la profe Ana María. 📝🤓
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
¿Cómo funcionan los preprocesadores? Ventajas de utilizar uno
2/20Lectura
¿Cómo funcionan los preprocesadores?
Un preprocesador es una herramienta que nos permite escribir pseudocódigo recibiendo como parámetro de entrada los estilos que posteriormente serán convertidos a CSS nativo. Podemos decir que funcionan de manera similar a los traductores pues al indicarle una sintaxis devuelve los valores en una sintaxis nueva.
En SASS se incluyen características adicionales, como variables, mixins, herencia de clases, entre otras, que hacen que el proceso de escritura de CSS sea más fácil y rápido.
Para poder hacer uso de un preprocesador, primero es necesario entender cómo funcionan los estilos CSS y el navegador. Los estilos CSS son interpretados y representados por el navegador, el cual se encarga de leer el código CSS y aplicarlo a los elementos o componentes HTML de la página. Es el navegador quien recorre la hoja de estilos, línea por línea, y asigna propiedades a los elementos de la página según lo indicado en el código CSS. Este proceso es fundamental para permitir que la página se estilice de la manera deseada, teniendo control sobre el diseño y la disposición de la página, proporcionando al usuario una experiencia visual atractiva, donde todos los elementos están estilizados y presentados de una manera agradable a la vista y fácil de interactuar.
Ventajas de utilizar un Preprocesador
Los principales beneficios de usar un preprocesador como SASS son la rapidez y la productividad. Permitiendo que el código se pueda escribir de manera mucho más rápida y sencilla, ayudando a los desarrolladores a ahorrar tiempo y ser más productivos. También hacen que el mantenimiento del código sea más fácil, pues todos los estilos se guardan en un solo archivo. La reutilización de código es otro de los beneficios que nos trae el uso de un preprocesador, esto significa que los mismos estilos se pueden aplicar en varias páginas sin tener que escribir el código una y otra vez.
Finalmente el uso de preprocesadores nos permite que sea mucho más sencillo trabajar una página web de manera responsiva.
Tipos de Preprocesadores
Stylus
Stylus es un lenguaje de programación de hojas de estilo en cascada (CSS) que se compila en CSS estándar, está basado en JavaScript. Hay algunas diferencias importantes entre Stylus y SASS. La sintaxis de Stylus es más simple y clara, mientras que la sintaxis de SASS se considera más profesional y compleja. Stylus ofrece una mejor portabilidad y es más fácil de usar. Sin embargo, SASS ofrece mayor soporte al ser utilizado con una mayor cantidad de lenguajes de programación.
Conoce Stylus
LESS
Una de las principales diferencias entre LESS y Sass es que Sass está codificado en Ruby y, por lo tanto, se procesa del lado del servidor, mientras que Less es una biblioteca de JavaScript (Como Stylus) y se procesa del lado del cliente. Un ejemplo es la forma en que ambos lenguajes manejan las variables es distinta. En LESS, los nombres de las variables se inicializan con @ y en Sass los nombres de las variables se inicializan con el símbolo $.
Conoce LESS
Aportes 11
Preguntas 0
Ordenar por:
Si quieren profundizar en los preprocesadores y ver en acción Stylus y Less también, les recomiendo el Curso de Preprocesadores CSS
¿Cómo funciona un preprocesador?
- Un preprocesador es una herramienta que convierte pseudocódigo en CSS nativo.
- Funcionan de manera similar a los traductores al convertir una sintaxis en otra.
- SASS incluye características como variables, mixins y herencia de clases que facilitan la escritura de CSS.
- Para utilizar un preprocesador, es necesario comprender cómo funcionan los estilos CSS y el navegador.
- Los estilos CSS son interpretados por el navegador, que los aplica a elementos HTML.
- El navegador recorre la hoja de estilos y asigna propiedades según el código CSS.
- Este proceso permite estilizar la página, controlar el diseño y ofrecer una experiencia visual atractiva y fácil de interactuar.
Ventajas de utilizar un Preprocesador
Beneficios de usar un preprocesador como SASS:
- Aumento de la rapidez y productividad en la escritura de código.
- Facilita el mantenimiento al consolidar todos los estilos en un solo archivo.
- Permite la reutilización de código en múltiples páginas.
- Simplifica el trabajo en diseño web responsivo.
Tipos
- Stylus:
- Lenguaje de hojas de estilo que se compila en CSS estándar.
- Basado en JavaScript.
- Sintaxis más simple y clara en comparación con SASS.
- Ofrece mejor portabilidad y facilidad de uso.
- Menor soporte para varios lenguajes de programación en comparación con SASS.
- LESS:
- Procesado del lado del cliente mediante JavaScript.
- Diferente manejo de variables en comparación con Sass.
- Variables en LESS se inicializan con @, mientras que en Sass se usan con el símbolo $.
Aquí les muestro una lista de las principales ventajas y desventajas de usar preprocesadores de CSS:
.
Ventajas
.
-
Mayor eficiencia y productividad: Los preprocesadores de CSS como Sass o Less permiten escribir estilos de manera más eficiente al ofrecer características como variables, anidamiento, mixins, entre otros, lo que puede reducir la cantidad de código necesario y hacer que la escritura de CSS sea más rápida y fácil.
-
Mayor modularidad y reutilización: Con los preprocesadores de CSS, se pueden crear componentes y bloques de estilo reutilizables y modulares, lo que facilita la gestión de estilos en proyectos grandes y complejos.
-
Personalización y flexibilidad: Los preprocesadores de CSS permiten personalizar y ajustar estilos de manera más flexible y con mayor precisión, lo que puede ser útil en proyectos en los que se requiere una gran atención al detalle.
-
Soporte para características avanzadas: Los preprocesadores de CSS pueden proporcionar características avanzadas que no están disponibles en CSS nativo, como operaciones matemáticas, funciones, lógica de programación, entre otros, lo que permite una mayor flexibilidad y potencial de diseño.
.
Desventajas:
. -
Curva de aprendizaje: Aprender a usar un preprocesador de CSS puede llevar tiempo y esfuerzo, ya que los desarrolladores deben familiarizarse con la sintaxis y las características adicionales que ofrece.
-
Compatibilidad: Algunas características de los preprocesadores de CSS pueden no ser compatibles con todos los navegadores, lo que puede requerir la compilación y optimización del código para diferentes navegadores.
-
Complicación: El uso de preprocesadores de CSS puede aumentar la complejidad de los proyectos de desarrollo, lo que puede requerir una mayor atención y mantenimiento.
-
Dependencia: Al utilizar un preprocesador de CSS, los desarrolladores pueden volverse dependientes de él y perder familiaridad con el CSS nativo, lo que puede ser un problema si necesitan trabajar en proyectos que no usan preprocesadores.
.
En general, los preprocesadores de CSS ofrecen muchas ventajas para los desarrolladores web, pero también tienen algunas desventajas que deben ser consideradas al decidir si utilizarlos o no en un proyecto.
Si no te salen los recursos de la clase, cambiate a la versión anterior de Platzi, ahí salen todos
A mi me gustó Stylus hasta que me empezó a dar errores pq si XD
¿ tienen los procesadores en general canflictos con el uso de frame works, o la aplicacion de BEM , o concideraciones adicionales que halla que tener?
Encantada de iniciar este asombroso curso :D
✨Sass esta desarrollado en ruby por lo que es mas rápido ya que corre del lado del servidor,
A diferencia de Less y Stylus que están desarrollados con JavaScript y corren del lado del cliente, por lo tanto Sass tiene mas soporte por la comunidad ya que puede ser utilizado con una mayor cantidad de lenguajes de programación y es utilizado en mochas páginas webs
CLASE 2 : ¿Cómo funcionan los preprocesadores?
Un preprocesador es una herramienta que nos permite escribir pseudocódigo recibiendo como parámetro de entrada los estilos que posteriormente serán convertidos a CSS nativo. Podemos decir que funcionan de manera similar a los traductores pues al indicarle una sintaxis devuelve los valores en una sintaxis nueva.
En SASS se incluyen características adicionales, como variables, mixins, herencia de clases, entre otras, que hacen que el proceso de escritura de CSS sea más fácil y rápido.
Para poder hacer uso de un preprocesador, primero es necesario entender cómo funcionan los estilos CSS y el navegador. Los estilos CSS son interpretados y representados por el navegador, el cual se encarga de leer el código CSS y aplicarlo a los elementos o componentes HTML de la página. Es el navegador quien recorre la hoja de estilos, línea por línea, y asigna propiedades a los elementos de la página según lo indicado en el código CSS. Este proceso es fundamental para permitir que la página se estilice de la manera deseada, teniendo control sobre el diseño y la disposición de la página, proporcionando al usuario una experiencia visual atractiva, donde todos los elementos están estilizados y presentados de una manera agradable a la vista y fácil de interactuar.
## Ventajas de utilizar un Preprocesador
Los principales beneficios de usar un preprocesador como SASS son la rapidez y la productividad. Permitiendo que el código se pueda escribir de manera mucho más rápida y sencilla, ayudando a los desarrolladores a ahorrar tiempo y ser más productivos. También hacen que el mantenimiento del código sea más fácil, pues todos los estilos se guardan en un solo archivo. La reutilización de código es otro de los beneficios que nos trae el uso de un preprocesador, esto significa que los mismos estilos se pueden aplicar en varias páginas sin tener que escribir el código una y otra vez.
Finalmente el uso de preprocesadores nos permite que sea mucho más sencillo trabajar una página web de manera responsiva.
## Tipos de Preprocesadores
**Stylus**
[Stylus](https://stylus-lang.com/) es un lenguaje de programación de hojas de estilo en cascada (CSS) que se compila en CSS estándar, está basado en JavaScript. Hay algunas diferencias importantes entre Stylus y SASS. La sintaxis de Stylus es más simple y clara, mientras que la sintaxis de SASS se considera más profesional y compleja. Stylus ofrece una mejor portabilidad y es más fácil de usar. Sin embargo, SASS ofrece mayor soporte al ser utilizado con una mayor cantidad de lenguajes de programación.
Conoce [Stylus](https://stylus-lang.com/)
**LESS**
Una de las principales diferencias entre [LESS](https://lesscss.org/) y Sass es que Sass está codificado en Ruby y, por lo tanto, se procesa del lado del servidor, mientras que Less es una biblioteca de JavaScript (Como Stylus) y se procesa del lado del cliente. Un ejemplo es la forma en que ambos lenguajes manejan las variables es distinta. En LESS, los nombres de las variables se inicializan con @ y en Sass los nombres de las variables se inicializan con el símbolo $.
Conoce [LESS](https://lesscss.org/)
Tocara darle un repaso a Less y Stylus aunque si he escuchado que el más utilizado es Sass y por eso andamos aquí aprendiéndolo 🤟🏻
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?