¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

Se que a muchos les ayudara esta imagen.

Si estas viendo esto en el 2021 y no sabes cual preprocesador usar, usa Sass.
¿Porque?
Segun “State Of CSS 2020” Sass fue la tecnolgia mas adoptada y con mas satsifaccion del ecosistema.
https://2020.stateofcss.com/es-ES/technologies/

https://www.frontendmentor.io/

Es una buena página para practicar HTML y CSS, te dan las imágenes y todo junto con una breve explicación (Tiene javascript también)

Me encanta el efecto en la página de “Go pro”, es genial ( https://gopro.com/en/us/homepage-v3).

Aquí les dejo una lista de las pagina web que me gustaría replicar

• https://www.gatsbyjs.com/
• https://dunderville.se/
• https://atozofai.withgoogle.com/intl/es/
• https://problem.studio/
• https://space.airkhruang.com/
• https://ourstoriesin.com/
• https://takeboost.com/
• https://basement.studio/
• https://wmgaz.pl/
  ¡Déjenme saber cuales son las que a ustedes les gustaría replicar!

Más info click aquí

Un preprocesador de CSS es una herramienta que nos permite escribir pseudo-código CSS que luego será convertido a CSS real. Ese pseudo-código se conforma de variables, condiciones, bucles o funciones. Podríamos decir que tenemos un lenguaje de programación que genera CSS.

El objetivo de estos preprocesadores es tener un código más sencillo de mantener y editar. Los preprocesadores incluyen características tales como variables, funciones, mixins, anidación o modularidad.

Siempre hago todo la parte HTML rapido y en el CSS me quedo durante horas! jaja
Necesito mas práctica

Este es uno de los cursos más largos que he hecho hasta la fecha. Pero esta Re-bueno. CSS es un mundo y toca hacer fallo y error hasta lograr aprender como funciona.

Les comparto una frase me encanta para continuar, de nunca parar de aprender.
“Cualquiera que para de aprender se hace viejo, tanto si tiene 20 como 80 años. Cualquiera que sigue aprendiendo permanece joven. Esta es la grandeza de la vida.” Henry Ford

Mi página : Sergio99778
Todavía no esta terminada, pero si tienen algunas opiniones al respecto me gustaría escucharlas.
Se ve más bonita en celular xdxdxd. ❤️

Si alguien por aquí esta empezando con el JS Challenge o algo similar.
Sí, este curso puede llegar a ser abrumador. Sólo les digo que saben lo que hacen en Platzi, porque te dan como una pincelada de todo lo que necesitas saber para tener PANORAMA. Es algo que me hubiese gustado un montón haberlo tenido hace dos años.

Por favor, no se frustren. Entenderán todo, creanme.

Los preprocesadores son muy útiles.
Pienso que para tener un panorama de cómo funciona cada preprocesador y saber con cuál se siente uno más cómodo hay que tomar este curso
https://platzi.com/clases/preprocesadores/
Saludos!!

https://freebiesbug.com/psd-freebies/website-template/
Esta web ofrece templates gratuitos en photoshop para poder replicar en HTML y CSS

Les recomiendo el curso de preprocesadores de plazi. es de mis favoritos
https://platzi.com/search/?search=preprocesadores

que bonito mensaje y muy alentador, muchas gracias teff.
.

Soy completamente nuevo en JS comencé la Escuela pensando que iba a ser desde 0 pero hay cosas que se van mas adelante, cada informacion es buena, eso no lo niego.
Pero para los que venimos comenzando si es importante primero tener el mayor conocimiento posible para poder utilizar estos tipos de herramientas, al menos a mi parecer.
Y entiendo muchas cosas que dicen porque siempre me ha gustado programar, pero en JS es primera vez.

Asi que si eres nuevo, y lees este mensaje! Animos. Que todos podemos

El consejo de replicar paginas que a uno les gustan, es una muy buena manera de practicar.

Super el consejo de replicar páginas lo que yo hago es ir a pinterest y buscar web desing y tomo un diseño y lo hago en html y css pero no he usado un preprocesador

super interesante, seria chévere tener aquí el link directo a el curso de preprocesadores.

A mi me hubiera gustado ver este tema con ejemplos prácticos como todo lo demás, pero ya me toca ir a verlos por mi cuenta, aún así, muchas gracias, un excelente curso hasta lo que he visto.

¿Cuál procesador se usa mas en la actualidad?

Pues a replicar páginas entonces jeje

van muchas veces que me frustran desafíos que se ponen porque parece que lo que ya aprendí no lo aplico bien y tengo que volver a ver como era para hacerlo de manera correcta o simplemente me pasan pequeños errores que no me doy cuenta pero el punto es no rendirse y seguir 😄

Para la productividad sería bueno su utilidad, pero ojito ojito: Depende del tipo de proyecto, primero conversa con el equipo de desarrollo.🚀🙌💻

gracias un tema para leer mucho, yo en lo personal tratare de replicar las clases localmente con mi gente…

El mejor de los consejos “no desanimarse” por el contrario encontrar motivación en cada cosa nueva que aprendemos, lo cual suma a mejorar nuestras habilidades y por supuesto nuestros proyectos. 😀

Interesante, nunca los he usado, es hora de empezar a tomarlos en cuenta 👌.

JANJAJAJAJAJAJAJAJAJJAJA, CSS CON ESTEROIDES, mejor metáfora evere jajajajajajjaja.

He estado haciendo todas las actividades de este curso con stylus y se los recomiendo!

la verdad no se porque pero no me gusta mucho utilizar prepocesadores

(a modo de estudio, por supuesto)…jaja me dio mucha risa esa parte.

Pero ya hablando en serio tienes mucha razón es bueno estimular la lectura de código de otros proyectos e intentarlos hacer para estudiar y enriquecer el vocabulario de CSS.

¡Muchas gracias por la motivación! Quede con ganas de estudiar y practicar más 😃

Empece con LESS, luego pasé a Sass y probé Stylus y entre todos para mi Sass es quien mejor ha terminado haciendolo y más comunidad lo apoya, aunque el resto tiene también buenas comunidades.

Probad, elegir y permitiros cambiar en cualquier momento.

“… es muy importante que practiques y seas constante. Comenzar algo siempre va a ser muy difícil, pero con paciencia y dedicación podrías llegar a dominar estos temas fácilmente.” que bonito

se podría reemplazar algunos de estos preprocesadores por postCss ??? o postCss no tiene el alcance hasta el momento de lo que nos puedan dar sass, less, stylus??

Me encuentro un poco indeciso, si seguir con la programacion o con el diseño web, la vdd es que hasta ahora me ha llamado mucho la atencion la parte del diseño, es increible lo que se puede lograr con estos preprocesadores.

en CodePen se puede practicar de manera muy sencilla con los preprocesadores, sin tener que invertir mucho tiempo configurando entornos de desarrollo.

Interesante, claro! la practica hace al maestro, seguiré practicando y replicando paginas. 😃 gracias!!

excelente yo llegue conociendo CSS pero precisamente quiero actualizarme y aprender a usar estos preprocesadores.

Sass es el #1, Less #2, pero va a depender de lo que use más tu equipo de trabajo, de momento estoy sola, vamos con Sass xD

Una característica que percibo que comparten los Preprocesadores de CSS, es que te permiten tener una estructura más legible y relativamente fácil de mantener tu código CSS.

Les comparto el siguiente enlace para conocer más del tema:
Preprocesador CSS

Cada vez que avanzo me doy cuenta que hay mucho mas por conocer, el camino es largo pero siento que vale la pena!

En este curso podemos practicar haciendo un clon de Google

https://platzi.com/clases/html-practico/

Por mi parte recomiendo SASS

ya tocara hacer esos cursos tambien. poco a poco por que no se puede volar en esto.

Hay curso completo de sass, less y stylus

La práctica hace al maestro

Gracias 😄

Here we go again!

Replicar es la manera mas efectiva en mi opinion de aprender y practicar, porque cuando te pasen un diseño vas a poder recplicarlo de forma rapida

Desconocía completamente este tema, sin embargo, considero que se debe tener conocimientos más claros de css para llegar a esto.

Me sentía un poco abrumado al llegar a este punto, pero solo de ver las posibilidades esa sensación se esfumo. 😃

para poder iniciar con un pre-procesaro, es importante comprender bien los conceptos que maneja CSS y asi seria mas facil moverse en mi opinion

Sass es genial, de hecho lo usa Bootstrap y algo genial que puedes hacer es que si extiendes el sass de Bootstrap puedes generar nuevos breakpoints para Bootstrap!

No tenia nincuna idea acerca de la existencia de los preprocesadores o de su uso. A darle atomos!!!

Son una excelente herramienta sobre todo para mantener un sitio, con el uso de variables y funciones se pueden hacer cambios de la temática muy fácilmente.

muchas gracias! la verdad es que si! la practica abre la mente y ayuda a dominar el tema que se proponga

Muy buen aporte, me sentía un poco frustrado con Css, pero cada ves que ahi aportes asi es un motor de motivación

Interesante los preprocesadores se que son muy útiles a la hora del desarrollo frontend 👍.

CSS es muy potente, da una excelente cara a los sitios, les crea una personalidad, pero así a mano es bastante trabajoso, aun así no deja de ser muy interesante

Me gusta mucho usar SASS, pero también me agrada el hecho de que CSS acepta variables y eso te facilita la vida.

Como lo mencionaste, lo más dificil es comenzar pero con un poco de motivación se puede lograr.

También es una buena motivación cuando vemos alguna página que no nos agrada y nos planteamos que haríamos nosotros para hacerla visualmente agradable, que modificaríamos y como lo haríamos 😃

yo subo a github cada avance que tengo desde que hice mi primer nav_bar hasta ya una pagina clonada que no quedo tan parecida a la original pero se va tomando cada vez mas nivel.

Me gusto mucho saber sobre preprocesadores son como un tipo de storybook pero para CSS.
Sólo eh estudiado SASS y me resulto muy emocionante la manera en que en verdad ayuda a mantener un orden de cada elemento.

Siento que tal vez sea mejor aprender un poco mas de CSS crudo antes de empezar a pensar en estos pre-procesadores. CREO . . . Alguien ya los está probando ? Que resultado tuvieron ? Gracias!!

Desde cuando estoy que quiero aprender sobre Preprocesadores CSS ya que aveces de tanto CSS siento que repito y repito lo mismo y hago o siento que hago un código muy sucio.
Pronto estaré empapándome de estos temas.
Por el momento a seguir practicando y practicando como bien lo dice la profesora! 😄

Ahora la pregunta que me hago es cual uso…

Muy bueno, Siempre pa delante, Éxitos 👍

Un nuevo tema por aprender, muchas gracias, más motivado

Me encanta sass

mas que una clase, es un buen discurso de motivación, gracias

Acabo de hacer el landing de snapchat, dure super poco le va agarrando el ojo clinico a esto uno…!

CSS con esteroides HAHAHAHAA

Todavia recuerdo cuando me lanzaron al campo de batalla… directo a Sass sin saber un poco de css

Preprocesadores de CSS = CSS en esteroides 💪🏻

Gracias ! :)✌✔

Aquí les dejo información sobre estos procesadores:

https://devcode.la/tutoriales/que-es-stylus-preprocesador-de-css/
https://maquetando.com/sass-y-less-el-presente-de-css

Aqui hay algunos retos y actividades si quieren practicar

Vengo de tomar el curso de preprocesadores y justo hice este proyecto usando lo que aprendí 😊

Aquí hay un artículo que habla de cual de los preprocesadores puedes eligir:
https://www.lambdatest.com/blog/css-preprocessors-sass-vs-less-vs-stylus-with-examples/

También está postCSS

https://postcss.org/

Ahora si me siento perdido pero voy a estudiar más sobre este tema ya que hasta ahora el CSS siempre lo habia estado utilizando asi como lo habian estado enseñando en todo el curso antes de esta clase

Gracias Profe

Excelente.

Gracias!

muchas gracias a practicar

Platzi tiene varios cursos de Preprocesadores.

Esta genial este curso

cool

Los procesadores son bien importantes, espero poder dominar alguno de los mencionados!

Excelente curso.

Este ha sido por mucho, uno de los dos mejores cursos que he tomado, después del de Git y Github

Muy bueno!

Gracias !

Me encanta utilizar Sass y esta explicación a sido fácil de entender funciona.

Sass 💗

Sigamos aprendiendo en este maravilloso mundo!

voy a empezar aprendiendo SASS

Gracias por la información

Excelente!

Genial!! a darle