En stylus no es necesario agregar los “:” para definir la propiedad… Fantastico!
Introducción
Qué aprenderás sobre preprocesadores
Conceptos básicos de CSS
Selectores de CSS
Evolución de las Tecnologías de Front-End
Introducción a los Preprocesadores
Metodologías para estructurar código
Introducción a BEM
Guías para creación y mantenimiento de código
Instalación de herramientas de compilación
Preprocesadores para HTML
Introducción a Pug
Sintaxis
Interpolación
Variables
Condicionales y Loops
Mixins
Includes y Extends
Finalizando ejercicio de Landing Page
Less
Introducción a Less
Anidamiento e imports
Variables
Funciones
Mixins
Finalizando ejercicio de página de artículos
Sass
Introducción a Sass
Variables
Imports y Extends
Mixins
Funciones
Condicionales y Loops
Finalizando ejercicio de perfil de usuario
Stylus
Introducción a Stylus
Variables
Mixins
Funciones
Condicionales y Loops
Desarrollo del proyecto Platzi Games
Introducción al proyecto
Plantillas modulares con PUG: Header
Plantillas modulares con PUG: Footer
Grid System con Sass
Mixins para manejo de fuentes responsivas
Funciones para media queries
Finalizando el proyecto
Conclusiones y Cierre
Conclusiones y Cierre
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
En las variables almacenamos datos que se puede reutilizar en todas nuestras hojas de estilos. Así evitamos tener que escribir lo mismo una y otra vez cuando se realiza algún cambio, ya que sólo vamos a modificar el valor de la variable y se aplicará a todos los lugares donde sea usada.
Comúnmente almacenamos en variables las guías de estilo de nuestro sitio, como pueden ser los colores y fuentes.
Aportes 31
Preguntas 2
En stylus no es necesario agregar los “:” para definir la propiedad… Fantastico!
No sé uds, pero a mi me gustan los ; y {} todo está más organizado. No sé.
Yo sigo con los puntos y comas 😂😂 pero esta genial stylus
No sé si sea bueno el dejar esa costumbre de usar los “;”, “:” y “{}”, digo cada proyecto es diferente y si los requieren se va a complicar el desacostumbrase de nuevo… no sé si la practicidad de stylus lo valga, solo digo
La principal diferencia de las variables en Stylus con los otros preprocesadores que hemos visto hasta ahora es que en Stylus, las variables se declaran de la manera mas sencilla posible, osea… pelonamente, sin un $
o un -var
. Eso es realmente super cool.
yo uso python en el backend principalmente y ver stylus me parece fabuloso, la sintáxis limpia siempre va a mejorar la lectura
Declaramos variables asi
Fuente1='Lato', sans-serif
Fuente2= 'Oswald', sans-serif
color-primario= #333333
color-secundario= #8841DA
color-claro=#FFFFFF```
Stylus parece ser muy bueno, me resulta muy ligero y fácil de escribir css, además el hecho de evitar escribir @, $, ; etc me hace sentir que avanzo mucho más rápido… sin embargo no sé si quiero olvidarme de utilizar las comas y punto y comas y símbolos raros jaja, será una decisión difícil…
Este es un reto para no usar los punto y coma. Los uso hasta en JS, pero en Stylus no se deben llevar.
Este Preprocesador de CSS esta muy bueno, creo que sera de mis favoritos junto con SASS, aunque mi primera eleccion es SASS.
Viendo esto en Octubre 2020, también se pueden quitar los dos puntos!!
Variables
Fuente1 = 'Lato', sans-serif
Fuente2 = 'Oswald', sans-serif
color-primario = #333333
color-secundario = #8841da
color-claro = #FFFFFF
Codigo clase
.encabezado--con-filtros
display: flex
width 90%
margin 0 auto
padding: 30px 0
h2
margin-top: 10px
text-transform: uppercase
font-weight: 500
font-size: 50px
font-family: Fuente2
.filtros
width: 250px;
height: 75px
padding: 20px
margin-left: auto
span
text-transform: uppercase
font-family: Fuente2
a
margin-left: 20px
font-size: 25px
Acostumbrarme a no usar llaves ni puntos con comas al final no me costó tanto.
Fuente1 = "Lato", san-serif
Fuente2 = "Oswald", san-serif
color-primario = #333333
color-secundario = #8841da
color-claro = #fff```
estupendo, sigamos 😄
JAJAJAJ, no lo soporto!
no puedo aguantar la sintaxís de este lenguaje, estoy enamorado de la sintaxís de JS y CSS.
menos mal nadie quiere a Stylus
Buenas prácticas en Prepos
No se declara la variable en base a un nombre en particular, solo se crea con nombres no relacionados con la propiedad.
¿cómo llamo la variable?
en el lugar donde se requiere la llamas así
Variableeeeeeee
Hasta ahora sin problemas, siempre me olvidaba de los punto y coma cuando escribía en css que para mi era un gran dolor de cabeza.
Ya me enamoré de Stylus!
Yo sigo con el punto y los corchetes 😄 es algo que ya tengo guarado desde hace mucho tiempo
🟥NO ES NECESARIO🟥
No es necesario usar los dos puntos despues de la colocar la propiedad CSS
Podemos trabajar sin usarlos.
.encabezado--con-filtros
display flex
justify-content center
Brutal
La sintaxis de stylus es muy diferente a las demás y esta no utiliza los famosos corchetes.
d
El no tener las llaves lo hace mas lindo digamos a la vista… Pero cuando tiene que corregir un codigo css , que fue creado con css puro sin preprocesadores,
tienes la costumbre de no usar punto y coma.
Muy bien! 😄 vamos super!
entiendo por que se usa Sass es lo mas parecido a js
Opinion personal:
No tener que andar con el ; ni el : es la leche
hace mas agil la escritura de codigo el no tener que poner tantos signos y caracteres especiales
La manera de declarar variables en Stylus es bastante simple y agradable
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.