Mixins

Clase 8 de 13 • Curso de Less 2018

Resumen

Less es uno de los primeros preprocesadores que son la posibilidad de mezclar selectores. Lo más importante es que con estos podemos ahorrar mucísimo código.

Luis Jaquez

student•

Hay una gran diferencia al crear un mixin en LESS que en SASS!

Emerson Cedeño

student•

vía SASS (bien explícito):

declaración explícita,
no es necesario que el nombre del mismo inicie con un punto,

@mixin my_mixin { ... }

vía LESS (no tan explícito):

.my_mixin() { … }

… y al igual que ambos, no compila sino hasta que es implementado en algún selector.

Emerson Cedeño

student•

… de igual forma, en cuanto a la implementación:

vía SASS (explícita):

.element { @include my_mixin; }

vía LESS:

.element { .my_mixin; }

Gerardo Manuel Reyes Fernández

student•

Don’t repeat yourself !!
Realmente esto de los mixins pueden reducir lineas y lineas de código y hacerlo mas mantenible
Esta padre también que si no se usa un mixin no lo compila.

Harold David Avila Sabogal

student•

Don’t repeat yourself !! Tu lo has dicho

bruno guerra solano

student•

se puede compilar encima de un css ya trabajado ?

Roger Carlos Ariel Alba

student•

Hola, Bruno

No lo he intentado pero puede sobreescribir algo importante del código, así que yo lo que haría sería agregar ese CSS existente al LESS y luego compilar por completo.

Por cierto puedes ver el curso de Preprocesadores y ver como puedes integrar todos en un proyecto.

Saludos

Francisco Imanol Suarez

student•

Hola Bruno, como dice Carlos podrías sobrescribir las clases, a modo ejemplo en Bootstrap al traer el archivo minificado(.min.css)seria muy difícil modificar una clase como danger, pero podes sobrescribir estilos en otro .css y ponerlo en la linea siguiente del archivo minificado

<head>
  <link rel="stylesheet" href="bootstrap.min.css">
  <link rel="stylesheet" href="styles.css">
</head>

Platzi Team

student•

Puede mezclar selectores de clase y selectores de identificación

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

lo que compilaría en:

.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

marlong yesith mendoza garcia

student•

porque el profesor recomienda no usar (margin:0 auto) si no , especificar los márgenes que queremos modificar, ¿se considera una mala practica el margin 0 auto?

Héctor Eduardo López Carballo

student•

Hola!

No creo que lo haga por ser mala practica, sino para que sea más fácil de leer lo que se está haciendo. Es importante recordar que el código puede ser leído por otras personas y al separarlo podría perder explicidad.

marlong yesith mendoza garcia

student•

Gracias por resolverme la duda Héctor! 😃😃

Aracely Alba

student•

En vez de margin-left: auto y margin-right: auto, se podría usar margin-inline: auto y es lo mismo.

Christian Alvarenga

student•

Dato curioso, he hecho la prueba al invocar el mixin, no es necesario poner el punto y coma al final, el compilador de igual manera comprende que es un mixin y te lo compila sin problema poniéndolo o no.

Jose Daniel Barría Reyes

student•

Mixins: mezclar selectores o reutilizar selectores en base a otros. Esto nos ayuda a reutilizar codigo.

.max-width(){
	//properties
	max-width: 1024px;
}
.section{
	//lo aplicamos a una clase
	.max-width;
}
.footer{
	.max-width;
}

Esos solo se compilan si los incluimos

Harold David Avila Sabogal

student•

Gracias

Jhonatan David Ibarra Lavado

student•

sigamos :D

Andrés David Loaiza Zamudio

student•

Avanzando con Less

Fernando Galdós

student•

gran clase!

Naldo Duran

student•

Mixins

Cómo funciona Less

¿Dónde aprender CSS con preprocesadores?

Qué aprendrás sobre preprocesadores

Qué aprenderás sobre Less

Instalación de Less

Tutorial y Reto

Variables: Definición y ejemplos

Anidaciones

Mixins

Mixins Paramétricos

Solución del reto

Funciones de Less

Ejemplo de funciones con Less

Controles de Flujo