Mixins

ya tome la decisión usaré siempre stylus, hasta que me lo prohíban 😃

Cuidado con el autocompletado que le cambió al profe el h3 por height en el minuto 6:44

El box-shadow para que lo copien mas facil

box-shadow: 0px 20px 33px 0px rgba(0,0,0,0.2)

Es relajante ver como se escribe css con Stylus.

“Stylus”, es muy “accesible”. En lo personal, sólo los utilizaría en caso de “emergencia”. Me gusta maquetar, diseñar …etc. Creo que, para los que son más apasionados del “backend”, les van a encantar los Prepros.

Cada vez me queda claro que Stylus es como el Python de los Preprocesadores 😄

Mixin

contenedor()
	display: flex
	width 90%
	margin 0 auto
	padding: 30px 0

caja-sombra()
	background-color: color-claro
	box-shadow: 0px 20px 33px 0px rgba(0,0,0,0.20)

Codigo añadido

.contenido 
	margin-bottom 40px
	justify-content: space-evenly
	contenedor()

.caja
	max-width: 400px
	caja-sombra()

	&__contenido 
		padding: 20px
		background-color: color-claro
		span
			text-transform: uppercase 
			color: color-secundario
			font-family: Fuente2 
		h3 
			text-transform: uppercase 
			font-weight: normal
			font-family: Fuente2 

Forma de crear un Mixing

caja-sombra()
	background-color: color-claro
	box-shadow: 0px 20px 33px 0px rgba(0,0,0,0.20)

Forma de llamarlo

caja-sombra()

Los invito a probar otra funcionalidad que tiene stylus como posible alternativa a los mixin: hablo del @extend.
Documentacion

No encuentro alguna razon mas que el simple gusto el hecho de usar stylus, less o sass. Se me hacen los tres iguales salvando alguna que otra diferencia en la sintaxis.

Less y Sass son buenos pero no me convencían de usar prepos.
Stylus por el contrario, me motiva con esa simplicidad. 😎👌

Principales beneficios al utilizar preprocesadores de CSS

El uso de preprocesadores en nuestros proyectos aporta una serie de beneficios entre los que podemos destacar:

• Posibilidad de añadir funcionalidades adicionales que no son posible de utilizar en archivos CSS tradicionales, como son el uso de variables y lógica condicional

• Dispondremos de una hoja de estilos más limpia, consiguiendo a la vez que sea más eficiente y fácil de mantener.

• Ofrece la posibilidad de reutilizar mucho código, lo que se traduce en un ahorro de tiempo y trabajo.

• Los cambios serán mucho más rápidos, ya que únicamente deberíamos cambiar el valor de alguna variable.

• Ayuda a crear código compatible con todos los navegadores, lo que supone una gran ayuda para los diseñadores de sitios web.

• Se crea una capa de abstracción, donde no trabajaremos directamente sobre nuestro archivo CSS, ofreciendo una mayor seguridad.

• Posibilidad de separación absoluta del proceso de desarrollo y producción.

Me llaman mucho la atención Postcss y como segunda opción Stylus

Mixins en Stylus

Stylus tiene la manera mas simple, elegante y fina de hacer mixins de todos los preprocesadores que hemos visto hasta ahora, es literalmente como si fuera una funcion. Aqui un ejemplo

mixinUno()
  @misEstilos

Los mixins siempre deben ir hasta arriba, junto con las variables y deben estar bien indentados. Que cosa mas simple, mas linda, que cosa tan bien hecha…

Autocompletado juega mala pasada

Lo genial de Stylus es que no es necesario ni " ; " ni los " : ". Personalmente me ayuda a ser más rápido

Hasta este punto estoy entre Sass y Stylus, terminando este bloque vemos con cual me quedo

Definitivamente es mucho más fácil en Sytuls 😮

Definitivamente es mucho más fácil en Sytlus 😮

No cabe duda Stylus, de ahora en adelante es tan pero tan bueno leer el código así jaajajaj

Creando mixins

Para declararlo es necesario solamente poner el nombre y dos parentesis, luego se define debajo de el con un indentado sencillo.

nombredelmixin()

contenedor()

¿Cómo lo mandas a llamar?

nombredelmixin()

contenedor()

Mandando llamar mixin creado

Creando mixin

Prefierio Sass actualmente, ya que es como con pug, al usar emmet nunca escribis la parte de la sintaxis que dice ahorrar el preprocesador… y por ende no me ahorra tiempo hacerlo con stylus, y me es mas legible usando las llaves para los bloques

ej:
con emmet si queres escribir width: 10px;
lo haces con: “w10” + enter,
“fz18” = font-size: 18px; / “ttu” = text-transform: uppercase;
entonces termina dando igual si lleva o no punto y coma ya que de todas formas no lo escribis

html lo mismo, pug o html da igual con emmet, tampoco tenes que escribir las etiquetas de apertura o cierre
ej. “section” + enter = <section></section>
o “.clase” + enter = <div class=“clase”></div>

Que bueno que escogí stylus jaja, está muy bueno

#LargaVidaAStylus

esto es increíblemente cómodo de usar…

Creo que la potencia de los preprocesadores está en poder generar diferentes plantillas para una página web. Para poder hacer esto creo que se debe disponer de un conversor de estilos. Un conversor de estilos es una herramienta que permite generar reglas CSS para diferentes estilos visuales en los que puede expresarse las líneas visuales de una web.

Creo en los preprocesadores CDS (Content Define Style). ¡Toda una solución coderless!

estupendo 😄

Se pueden mezclar mixins ?

Me encantó la lección, la verdad es que me encanta poner las llaves y puntos y comas cuando escribo CSS pero siento que avanzo más rápido solo controlando la indentación

Vaya, hay que tomar el curso de Stylus, pero a mi me va ganando Sass

Me esta gustando Stylus

Me siento super comodo con styles

Perfecto! 😄

Ya, chicos, pero a seré la única que se me descuadra toda la indentación. Lo estoy haciendo igual…pero de verdad que me está costando este preprocesador.

cualquiera de los preprosesadores es bueno, me estan gustando mucho, menos pug

Toma fuerza Stylus

Se declaran asi

caja-sombra()
 background-color: color-claro
 box-shadow: 0px 20px 33px 0px rgba(0,0,0,0.20)

b