Introducción a los Preprocesadores

4/42
Recursos
Transcripción

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.

Aportes 53

Preguntas 6

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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 !!!

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 que nos ahorra tiempo, trabajamos de forma modular y mas ordenada.
Los preprocesadores potencian HTML Y CSS.

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.

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 ❤️

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

Este curso me gusta

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 🤔

Es verdad, al desarrollar páginas web yo he tenido problemas al modificar estilos css, espero con este curso aplicar estos nuevos conocimientos para nuevas páginas web

¿Hay preprocesadores para html?

Excelente clase. Continuemos 😄

Muchas gracias por esta introducción, quiero agregar que AMÉ la playera, por favor ponerla en Platzi Store

Resumen de la clase:

Los preprocesadores ayudan el poder de extender html y css.

Brindando:

  • Aplicación de variables, funciones y mixin que permiten reutilizar el codigo en otros sitios y proyectos.

  • Ayuda a que tu codigo CSS y HTML sea más sencillo y entendible.

  • Ayuda a ahorrar tiempo y dinero al reutilizar código.

  • Ahorra pesadillas de tu codigo CSS hyperextendido con unos meses de antiguedad.

Preprocesadores de CSS

Herramienta que nos permite escribir pseudocódigo que luego será convertido a CSS o HTML standard.

Extiende el poder de CSS con características tales como variables, funciones o mixins

Variables

Pedazo de memoria que almacenamos para reutilizarlo en otro tipo de dato. Se guardan y se recuperan, datos que se utilizan en un programa.

Funciones

Tienen varios parámetros o argumentos que son variables que modifican su comportamiento.

Mixin

Parecidos a las funciones, ofrece una funcionalidad que pueda ser reutilizada en otras clases pero que no esta pensada para usarse de forma autónoma.

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.

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.

Notas de la clase

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