No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Mixins

32/42
Recursos

Su finalidad es ofrecer una funcionalidad que pueda ser reutilizada en otras clases pero que no est谩 pensada para usarse de forma aut贸noma. Nos permite crear bloques reusables de c贸digo que cambian su resultado dependiendo del par谩metro que enviemos.

Con los mixins logramos escribir menos c贸digo, produciendo un c贸digo m谩s claro, m谩s expresivo y sobre todo m谩s f谩cil de mantener.

Aportes 42

Preguntas 2

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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.

鈥淪tylus鈥, es muy 鈥渁ccesible鈥. En lo personal, s贸lo los utilizar铆a en caso de 鈥渆mergencia鈥. Me gusta maquetar, dise帽ar 鈥tc. Creo que, para los que son m谩s apasionados del 鈥渂ackend鈥, 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: 鈥渨10鈥 + enter,
鈥渇z18鈥 = font-size: 18px; / 鈥渢tu鈥 = 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. 鈥渟ection鈥 + enter = <section></section>
o 鈥.clase鈥 + enter = <div class=鈥渃lase鈥></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鈥ero 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