Introducción a los Preprocesadores
Clase 4 de 42 • Curso de Preprocesadores CSS
Contenido del curso
Almudena Pardo Alvarez
student•
hace 6 años
Bernardo Aguayo Ortega
student•
hace 6 años
Alfredo Martínez García
student•
hace 6 años
Clase 4 de 42 • Curso de Preprocesadores CSS
Contenido del curso
Almudena Pardo Alvarez
Bernardo Aguayo Ortega
Alfredo Martínez García
David Behar
Bryson Steven Mosquera Florez
David Behar
Jorge Eduardo Saavedra Gutierrez
Maricruz Pizaña Solano
Addi Alberto Salazar Espinosa
Juan Jiménez
sebastian aldana
Bernardo Aguayo Ortega
Maricruz Pizaña Solano
Mariana Cortés
Omar Gabriel Aguilar Moscoso
Antonio Molina
Anggi Vanesa Pallares Solis
Wilson Delgado
Platzi Team
Maricruz Pizaña Solano
Irving Juárez
Kevin Andres Curruchich Xocop
Wandy Rafael Santana Evangelista
Juan Sebastián Herrera Carvajal
Bernardo Aguayo Ortega
Addi Alberto Salazar Espinosa
Juan Sebastián Herrera Carvajal
Bernardo Aguayo Ortega
Addi Alberto Salazar Espinosa
Isidro Sosa
Jiovanni Romo
Franco Nahuel Paez
Juan Esteban Galvis
Maricruz Pizaña Solano
Anderson Josué Oroya Silva
CRISTIAN BARBERO PÉREZ
Jorge Cruz Perez
Alejandro Ramos
Daniel Bello
Danilo Fernandez
John Cardenas
Danilo Fernandez
Jose Gaspard
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.
gracias por la aclaración
jajajajaja y se rehusan a corregirlo! pero bien podrían reusar el código que ya tienen
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.
Si, solo que su declaración es diferente, solo tengo una duda, en css cuando declaro una variable quedaría global??
Se declara para los hijos del elemento que lo declaras, la buena práctica es declararlas en un :root {} del cual heredan todos los elementos:
:root { --primary-color:blue; } body { background-color: var(--primary-color); }
Si declaras una variable en una clase, por ejemplo, no será accesible para los selectores fuera de su scope.
.boton { --primary-color: blue; } body { background-color: var(--primary-color); /*es una propiedad inválida, por lo que no cambiaría de color, aunque no tronaría, porque css no truena*/ }
Hola, soy el señor MIXIN !!!
Jajajajajaja, excelente.
jajajajaja
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?
Preprocesadores = super poderes
I feel like superman!
Las cosas como son.
Me está encantando este profesor!! Siento quesu forma de explicar y enseñar conecta conmigo
x2
x3
Comunidad de platzi les comparto mis apuntes,
un poco más de info: https://www.youtube.com/watch?v=YlwMPADJXHI
Gran aporte compañero, gracias
Excelente, gracias
Ventajas de los preprocesadores
.
La última ventaja me interesa mucho 😅😅
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.
de acuerdo x2
Así es :D
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.
de acuerdo!
Muy bien :)
En otros cursos y en este curso he leído comentarios que ahora CSS trae variables y otras funciones de preprocesadores de forma nativa. Mi pregunta es ¿vale la pena seguir profundizando en preprocesadores?
Personalmente daría una respuesta afirmativa. Ten en cuenta que un preprocesador no solo tiene como características principales a las variables o funciones. Una característica atractiva son los módulos de estilos (los distintos archivos de less, sass, etc), haciendo que modificar styles específicos sea muy sencillo, pues puedes encontrarlos con facilidad. Sin mencionar las anidaciones, que es sumamente útil para la especificidad. Si muchas ofertas de frontend tienen como requerimiento conocer SASS o LESS, será por algo, no crees? Saludos :)
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%20function%20is,variables%20based%20on%20media%20queries.)
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
Excelente, gracias por el aporte.
Si quiero hacer solo una landing page sencilla, vale la pena usar preprocesadores?
Para esa página probablemente no, pero si después de esa vas a crear otras páginas más grandes te puede servir para ir acostumbrándote a ellos e irlos manejando mejor.
Es como una inversión de tiempo, al crear esa página probablemente tardes más, pero te lo ahorrarás en las siguientes.
Si partes de cero sin saber preprocesadores igual y no, pero si ya los tienes aprendidos, considero que aun siendo pequeña agilizan tu trabajo, mas en el sentido del responsive, saludos :)
Tremendo los preprocesadores
¿Hay algo que este chico no haga bien?
Este curso me gusta
Entonces Preprocesadores es recomendable para ocupar en proyectos grandes, pero si estoy comenzando a aprender y quiero hacer solo una pagina?
Hola Danilo,
Lo recomendable es aprender a manejar CSS y HTML bastante bien antes de usar preprocesadores, entender que ocurre y cómo ocurre todo lo que los preprocesadores hacen. Si sabes HTML y CSS puedes aprender sobre preprocesadores sin problema, te ahorran un poco el trabajo :D
Gracias.
Con todo! <3