Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Variables

31/42
Recursos

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

Ordenar por:

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

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

Variables en Stylus

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