Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 9D : 5H : 41M : 2S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Introducción a los Preprocesadores

4/42

En esta clase junto al profesor Wilson Sánchez aprenderás qué son los preprocesadores y las ventajas de usarlos.

Un preprocesador es una herramienta que nos permite escribir pseudocódigo de forma modular, más fácil de rehusar, leer, y mantener. pseudocódigo que después será convertido a CSS o HTML estándar que el navegador entiende.

Gracias a los preprocesadores podemos extender las características de CSS y HTML al nivel de otros lenguajes de programación, permitiéndonos usar características como variables, funciones y mixins.

Sé que no tiene nada que ver con el tema y me disculpo de antemano por ser tan maniática, pero rehusar con “h” es negarse a algo. En cambio, cuando nos referimos a reutilizar, se escribe reusar.

Los preprocesadores son increíbles, pero actualmente CSS ya acepta variables y está en beta el acceso de mixins, así que el futuro del css es increíble.

Hola, soy el señor MIXIN !!!
señor meesseek.jpg

Preprocesadores = super poderes

Me está encantando este profesor!! Siento quesu forma de explicar y enseñar conecta conmigo

Un preprocesador es una herramienta que nos permite escribir pseudocódigo que luego será convertido a CSS o HTML standard, en pocas palabras, extiende el poder de CSS y HTML al nivel de un lenguaje de programación más potente con características tales como variables, funciones y mixins.

Variable, pedazo de memoria reservado para almacenar un valor, correspondiente a un tipo de dato. Es donde se guardan (y se recuperan) datos que se utilizan en un programa.

Función, tiene la posibilidad de tener parámetros o argumentos, que son variables que modifican su comportamiento.

Mixin, es una clase cuya finalidad es ofrecer una funcionalidad que pueda ser reutilizada en otras clases, pero ue no está pensada para usarse de forma autónoma.

¿Por qué utilizarlos?

  • Te salva tiempo y dinero al tener la opción de rehusar código.
  • Tener un código más sencillo de mantener y editar.
  • Modularizar nuestros proyectos de una forma lógica y sencilla.

Vamos aprender como optimizar nuestros estilos, enhorabuena. 😃

Esto es genial, en definitiva es una buena practica. Nos permite ahorrar tiempo, escribir código modular y legible lo que hace que potencie HTML Y CSS.

En CSS también existen variables: https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_custom_properties

Y este vídeo habla de muchas cosas de CSS: https://www.youtube.com/watch?v=bQ-lTZBgAKs

Esto es genial, en definitiva es una buena practica que nos ahorra tiempo, trabajamos de forma modular y mas ordenada.
Los preprocesadores potencian HTML Y CSS.

Este curso me gusta

¿Hay preprocesadores para html?

Excelente clase. Continuemos 😄

4. Introducción a los Preprocesadores

Los preprocesadores los usamos porque por defecto HTML y CSS no soporta variables, mixins, funciones, etc.

Por qué utilizarlos?

  1. Te salva tiempo y dinero al poder reusar código.
  2. Tener un código más sencillo de mantener y editar.
  3. Modularizar nuestros proyectos de una forma lógica y sencilla.

Creo que la mayoría de los que estamos comenzando aun no entendemos el completo valor que nos puede dar un preprocesador, por el simple hecho que lo mas probable es que no se haya hecho un proyecto lo suficientemente grande 🤔

Ventajas de los preprocesadores

.

  • Utiliza variables (estas ya vienen nativas en css plano).
  • Utiliza funciones, que son similares a las funciones de JavaScript. En donde se agrega un input y se recibe un output. Dependiendo del input (parámetros), el diseño de un elemento será diferente.
  • Se utilizan mixes. Los cuales nos ayudan a hacer nuestro código mas modular.
  • Salva tiempo y dinero
  • Simple de editar y mantener
  • Conseguirás pareja después de usar preprocesadores ❤️

Notas de la clase
Captura de pantalla 2021-05-25 205300.png

muchas ventajas para resumir codigo

Me gusta mucho esta clase es un buen resumen de cursos anteriores para poder comenzar fuerte!

Alguien sabe si hay un curso en platzi sobre arquitecturas css? más en específico sobre BEMIT, ITCSS o SMACS

Super loco lo que se proyecta en este curso, vamos animados a aprender!!

Un preprocesador CSS es un programa que te permite generar CSS a partir de la syntax única del preprocesador. Existen varios preprocesadores CSS de los cuales escoger, sin embargo la mayoría de preprocesadores CSS añadiran algunas características que no existen en CSS puro, como variable, mixins, selectores anidados, entre otros. Estas características hacen la estructura de CSS más legible y fácil de mantener.

Para utilizar un preprocesador CSS debes instalar un compilador CSS en tu web server.

Mas info aqui:
https://developer.mozilla.org/es/docs/Glossary/Preprocesador_CSS

b

“No quieres que tu página luzca como una piñata”

Gracias!!!🚀

Perfecto! 😄

Outstanding!!

Preprocesadores = pensar en los cambios del futuro. && Preprocesadores = codear codigo reutilizable.

Hace mucho tiempo he querido aprender acerca de preprosecadores a fondo, sin duda el tiempo que invertiré este curso será muy valioso.

Genial, gran clase

Me interesa mucho el curso porque, eso me pasa en éste momento (mucho código). Pero, no sabía cuál me podría beneficiar más de todos.

mixin evitar el compiar y pegar :v, espero ver esta clase prontoooooo

Realmente los preprocesadores son muy potentes y utiles

habla del mixin y me acuerdo de hbs (handlerbars) o ejs

Que bueno aprender a utilizar mejor CSS.

La modularidad es algo que de verdad deseo aprender con los preprocesadores

Me encanta la forma en la que explica el profe !! Gracias

El preprocesador de Platzi le cambió la remera a Wilson

Un preprocesador CSS es un programa que te permite generar CSS a partir de la syntax única del preprocesador. Existen varios preprocesadores CSS de los cuales escoger, sin embargo la mayoría de preprocesadores CSS añadiran algunas características que no existen en CSS puro, como variable, mixins, selectores anidados, entre otros. Estas características hacen la estructura de CSS más legible y fácil de mantener.

Los preprocesadores son una herramienta que nos ayudará a escribir código más rápido y efectivo que antes, porque estos preprocesadores agregan nuevas características que nos ayudarán a crear un código más escalable y con más funcionalidades que harán que nuestro código sea más limpio y sostenible .

Estas nuevas características son Variables, Funciones y Mixins, todo esto nos ayudará a ser más productivos y más rápidos que antes cuando escribimos código con los idiomas nativos.

Creo que la información es valiosa, pero siento que el profe usa en ocasiones palabras que no deberían estar en donde las dice. Siento que eso me interrumpe lo que estoy tratando de aprender. No es con ganas de ofender ni nada.

creo que son una buena herramienta, me emociona empezar a utilizarlos

Ahorrar tiempo sobre todo que es lo mas importante.

Con todo! ❤️

Un preprocesador se escribe con una sintaxis especial que nosotros le indicamos y debe compilarse a CSS para ser comprendido por el navegador. En sí lo que estamos haciendo es CSS pero con esteroides.

Un preprocesador es una herramienta que nos permite escribir pseudocódigo de forma modular, más fácil de rehusar, leer, y mantener. pseudocódigo que después será convertido a CSS o HTML estándar que el navegador entiende.

Existen varios preprocesadores CSS de los cuales escoger, sin embargo la mayoría de preprocesadores CSS añadiran algunas características que no existen en CSS puro, como variable, mixins, selectores anidados, entre otros. Estas características hacen la estructura de CSS más legible y fácil de mantener.

Para utilizar un preprocesador CSS debes instalar un compilador CSS en tu web server.

Mixin → Es una clase cuya finalidad es ofrecer una funcionalidad que pueda ser reutilizada en otras clases pero sin usarse de forma automática. (Ej. body)

Para los que son nuevos en CSS, quería decirles que ya existen las variables en el lenguaje sin la necesidad de ningún preprocesador, su sintaxis seria asi:

:root {
  --primary-color: #FFF;
  --font-size: 16px;
}
body {
  background-color: var(--primary-color); //Esto deja el fondo del "Body" blanco.
  font-size: var(--font-size: 16px;) //Esto deja el tamaño de la fuente en 16px;
}

Puedes leer mas aqui MDN y w3schools

Sé que no tiene nada que ver con el tema y me disculpo de antemano por ser tan maniática, pero rehusar con “h” es negarse a algo. En cambio, cuando nos referimos a reutilizar, se escribe reusar.

Los preprocesadores son increíbles, pero actualmente CSS ya acepta variables y está en beta el acceso de mixins, así que el futuro del css es increíble.

Hola, soy el señor MIXIN !!!
señor meesseek.jpg

Preprocesadores = super poderes

Me está encantando este profesor!! Siento quesu forma de explicar y enseñar conecta conmigo

Un preprocesador es una herramienta que nos permite escribir pseudocódigo que luego será convertido a CSS o HTML standard, en pocas palabras, extiende el poder de CSS y HTML al nivel de un lenguaje de programación más potente con características tales como variables, funciones y mixins.

Variable, pedazo de memoria reservado para almacenar un valor, correspondiente a un tipo de dato. Es donde se guardan (y se recuperan) datos que se utilizan en un programa.

Función, tiene la posibilidad de tener parámetros o argumentos, que son variables que modifican su comportamiento.

Mixin, es una clase cuya finalidad es ofrecer una funcionalidad que pueda ser reutilizada en otras clases, pero ue no está pensada para usarse de forma autónoma.

¿Por qué utilizarlos?

  • Te salva tiempo y dinero al tener la opción de rehusar código.
  • Tener un código más sencillo de mantener y editar.
  • Modularizar nuestros proyectos de una forma lógica y sencilla.

Vamos aprender como optimizar nuestros estilos, enhorabuena. 😃

Esto es genial, en definitiva es una buena practica. Nos permite ahorrar tiempo, escribir código modular y legible lo que hace que potencie HTML Y CSS.

En CSS también existen variables: https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_custom_properties

Y este vídeo habla de muchas cosas de CSS: https://www.youtube.com/watch?v=bQ-lTZBgAKs

Esto es genial, en definitiva es una buena practica que nos ahorra tiempo, trabajamos de forma modular y mas ordenada.
Los preprocesadores potencian HTML Y CSS.

Este curso me gusta

¿Hay preprocesadores para html?

Excelente clase. Continuemos 😄

4. Introducción a los Preprocesadores

Los preprocesadores los usamos porque por defecto HTML y CSS no soporta variables, mixins, funciones, etc.

Por qué utilizarlos?

  1. Te salva tiempo y dinero al poder reusar código.
  2. Tener un código más sencillo de mantener y editar.
  3. Modularizar nuestros proyectos de una forma lógica y sencilla.

Creo que la mayoría de los que estamos comenzando aun no entendemos el completo valor que nos puede dar un preprocesador, por el simple hecho que lo mas probable es que no se haya hecho un proyecto lo suficientemente grande 🤔

Ventajas de los preprocesadores

.

  • Utiliza variables (estas ya vienen nativas en css plano).
  • Utiliza funciones, que son similares a las funciones de JavaScript. En donde se agrega un input y se recibe un output. Dependiendo del input (parámetros), el diseño de un elemento será diferente.
  • Se utilizan mixes. Los cuales nos ayudan a hacer nuestro código mas modular.
  • Salva tiempo y dinero
  • Simple de editar y mantener
  • Conseguirás pareja después de usar preprocesadores ❤️

Notas de la clase
Captura de pantalla 2021-05-25 205300.png

muchas ventajas para resumir codigo

Me gusta mucho esta clase es un buen resumen de cursos anteriores para poder comenzar fuerte!

Alguien sabe si hay un curso en platzi sobre arquitecturas css? más en específico sobre BEMIT, ITCSS o SMACS

Super loco lo que se proyecta en este curso, vamos animados a aprender!!

Un preprocesador CSS es un programa que te permite generar CSS a partir de la syntax única del preprocesador. Existen varios preprocesadores CSS de los cuales escoger, sin embargo la mayoría de preprocesadores CSS añadiran algunas características que no existen en CSS puro, como variable, mixins, selectores anidados, entre otros. Estas características hacen la estructura de CSS más legible y fácil de mantener.

Para utilizar un preprocesador CSS debes instalar un compilador CSS en tu web server.

Mas info aqui:
https://developer.mozilla.org/es/docs/Glossary/Preprocesador_CSS

b

“No quieres que tu página luzca como una piñata”

Gracias!!!🚀

Perfecto! 😄

Outstanding!!

Preprocesadores = pensar en los cambios del futuro. && Preprocesadores = codear codigo reutilizable.

Hace mucho tiempo he querido aprender acerca de preprosecadores a fondo, sin duda el tiempo que invertiré este curso será muy valioso.

Genial, gran clase

Me interesa mucho el curso porque, eso me pasa en éste momento (mucho código). Pero, no sabía cuál me podría beneficiar más de todos.

mixin evitar el compiar y pegar :v, espero ver esta clase prontoooooo

Realmente los preprocesadores son muy potentes y utiles

habla del mixin y me acuerdo de hbs (handlerbars) o ejs

Que bueno aprender a utilizar mejor CSS.

La modularidad es algo que de verdad deseo aprender con los preprocesadores

Me encanta la forma en la que explica el profe !! Gracias

El preprocesador de Platzi le cambió la remera a Wilson

Un preprocesador CSS es un programa que te permite generar CSS a partir de la syntax única del preprocesador. Existen varios preprocesadores CSS de los cuales escoger, sin embargo la mayoría de preprocesadores CSS añadiran algunas características que no existen en CSS puro, como variable, mixins, selectores anidados, entre otros. Estas características hacen la estructura de CSS más legible y fácil de mantener.

Los preprocesadores son una herramienta que nos ayudará a escribir código más rápido y efectivo que antes, porque estos preprocesadores agregan nuevas características que nos ayudarán a crear un código más escalable y con más funcionalidades que harán que nuestro código sea más limpio y sostenible .

Estas nuevas características son Variables, Funciones y Mixins, todo esto nos ayudará a ser más productivos y más rápidos que antes cuando escribimos código con los idiomas nativos.

Creo que la información es valiosa, pero siento que el profe usa en ocasiones palabras que no deberían estar en donde las dice. Siento que eso me interrumpe lo que estoy tratando de aprender. No es con ganas de ofender ni nada.

creo que son una buena herramienta, me emociona empezar a utilizarlos

Ahorrar tiempo sobre todo que es lo mas importante.

Con todo! ❤️

Un preprocesador se escribe con una sintaxis especial que nosotros le indicamos y debe compilarse a CSS para ser comprendido por el navegador. En sí lo que estamos haciendo es CSS pero con esteroides.

Un preprocesador es una herramienta que nos permite escribir pseudocódigo de forma modular, más fácil de rehusar, leer, y mantener. pseudocódigo que después será convertido a CSS o HTML estándar que el navegador entiende.

Existen varios preprocesadores CSS de los cuales escoger, sin embargo la mayoría de preprocesadores CSS añadiran algunas características que no existen en CSS puro, como variable, mixins, selectores anidados, entre otros. Estas características hacen la estructura de CSS más legible y fácil de mantener.

Para utilizar un preprocesador CSS debes instalar un compilador CSS en tu web server.

Mixin → Es una clase cuya finalidad es ofrecer una funcionalidad que pueda ser reutilizada en otras clases pero sin usarse de forma automática. (Ej. body)

Para los que son nuevos en CSS, quería decirles que ya existen las variables en el lenguaje sin la necesidad de ningún preprocesador, su sintaxis seria asi:

:root {
  --primary-color: #FFF;
  --font-size: 16px;
}
body {
  background-color: var(--primary-color); //Esto deja el fondo del "Body" blanco.
  font-size: var(--font-size: 16px;) //Esto deja el tamaño de la fuente en 16px;
}

Puedes leer mas aqui MDN y w3schools