Mixins

Clase 32 de 42 • Curso de Preprocesadores CSS

Resumen

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.

Abraham Caso Torres

student•

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

Addi Alberto Salazar Espinosa

student•

Creo que haré lo mismo xD

Bernardo Aguayo Ortega

student•

it's the best

CRISTIAN BARBERO PÉREZ

student•

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

JORGE CARRILLO LOPEZ

student•

Es relajante ver como se escribe css con Stylus.

Addi Alberto Salazar Espinosa

student•

Así es :)

Bernardo Aguayo Ortega

student•

y facil de leer!

Sneider Sanchez

student•

El box-shadow para que lo copien mas facil

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

Denil José Parada Cabrera

student•

gracias mi buen hombre!

Jeremy Palomino

student•

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

Christian Velázquez

student•

"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.

Christian Velázquez

student•

@Ian93 Me refería a que, para las personas que prefieren el "Backend", les ayudaría para "recortar" tiempos en Frontend. Así, se concentrarían en el puro Backend.

Almudena Pardo Alvarez

student•

Dentro de que yo no tengo mucha experiencia, creo que para cualquier front-end es beneficioso conocer los preprocesadores. Además, cuando tienes un deadline, ahorras tiempo y código como sea. Pero te entiendo, a mi también me gusta mucho el hardcodear el CSS :)

Damian Spizzirri

student•

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.

Jairo Merea Dueñas

student•

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()

Luis Alejandro Vera Hernandez

student•

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

Tomas Salina

student•

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

Addi Alberto Salazar Espinosa

student•

Gracias! :D

Bernardo Aguayo Ortega

student•

Gracias!!

maximiliano Vai

student•

Los archivos de los preprocesadores pug, sass, less... etc ... ¿ que es buena páctica ? ¿se .suben a github o se deben ignorar ?

Massimo Di Berardino

student•

¡Hola Maximiliano! Sí, se deben subir a GitHub, porque más alla que después estos se pasen a css, el desarrollo lo haces sobre estos y si no los subes a GitHub, no tendrías el versionado accesible para todos los integrantes del proyecto o en el caso de que tú seas el único desarrollador debes tener el versionado tanto en tu equipo como en la nube, es decir en GitHub.

Christian Alvarenga

student•

También me daba curiosidad esto.

Leonardo Alain

student•

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

Kevin Andres Curruchich Xocop

student•

En lo personal, Sass me enredaba un poco Stylus puede ser mas amigable para los que estamos empezando 😁

Jose Armando Acevedo Angarita

student•

Me siento super comodo con styles

Carlos Roberto Villatoro Barrios

student•

Ya somos dos lo que nos sentimos cómodos con stylus, siento que es mucho más elegante y más fácil de entender a la hora de leer código.

Addi Alberto Salazar Espinosa

student•

Creo que yo igual :P

Gutierrez Diego

student•

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.

Jhon Alexander Romero Gonzaga

student•

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

Irving Juárez

student•

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...

CRISTIAN BARBERO PÉREZ

student•

Autocompletado juega mala pasada