Continuando con Mixins

Clase 11 de 21 • Curso de Sass 2018

Resumen

En esta clase continuamos trabajando en el uso de los mixins.

Alexander Henry Obispo Buendia

student•

Los **mixins **nos permite recibir parámetros, esta funcionalidad nos ayuda bastante, ya que con un solo mixins podemos obtener distintas salidas con solo cambiar el valor del parámetro.
Ejemplo: Nos ayuda bastante al momento de realizar mediaqueries
Mixins

Mediaquerie

Resultado

fuente:Sass

Harold David Avila Sabogal

student•

Muchas gracias

jesus gomez

student•

gracias! ¿podrias poner el cogigo en vez de imagenes? porfavor

Juan C Felizzola

student•

Cuando se define un mixin, los argumentos se definen como una serie de variables separadas por comas, y todo ello encerrado entre paréntesis.

@mixin max-width($max-width: 800px) {
	max-width: $max-width
	margin-left: auto
	margin-right: auto
}

En este caso le estamos definiendo un valor por defecto. Si deseamos cambiar ese valor, cuando lo llamemos se lo podemos cambiar de esta forma:

@mixin max-width(1200px)

Cristhian Daza

student•

Seria:

@include max-width(1200px);

Harold David Avila Sabogal

student•

Muchas gracias

Gerardo Manuel Reyes Fernández

student•

Mixin multi-parametrico

@mixin max-width($max-width : 800px, $ margin-x: auto) {
	max-width: $max-width
	margin-left: $margin-x
	margin-right: $margin-x
}

Harold David Avila Sabogal

student•

Muchas gracias

Carlos Martinez

student•

es igual que llamar a una funcion y pasarle parametros y si no se los pasamos pues toma los que se hayan puesto por defecto.

Daniel Esteves

student•

Es exactamente eso, gracias a Sass podemos utilizar la lógica de programación en nuestros archivos

Mauro Quinteros

student•

https://www.ombushop.com/blog/diseno-web/mixins-vs-herencia-en-sass.html

Aquí encontré un blog que habla sobre cuando usar mixin y cuando usar extend, que es muy similar al mixin solo que evitar que el código css se esté repitiendo

Luis Fernando Pedroza Taborda

student•

Genial aporte Mauro. gracias.

Andrés Alejandro Ramos Uyaban

student•

El que sabe programar , ésto se le hará muy fácil de entender...

Andrés Campuzano Garzón

student•

La verdad no es muy fácil, todo se reduce a contener el valor en una variable y luego usar esa variable a lo largo del proyecto.

Stiven Jiménez

student•

Aquí les dejo documentación acerca de los mixins https://sass-lang.com/documentation/at-rules/mixin

y si creen que este curso va un poco lento tomen el Curso de Preprocesadores CSS https://platzi.com/clases/preprocesadores/

Cesar Israel Aguilar Carrera

student•

gran aporte

GEMILLE ADASSI VAZQUEZ ESTRADA

student•

"En los lenguajes de programación orientada a objetos, un mixin es una clase que ofrece cierta funcionalidad para ser heredada por una subclase, pero no está ideada para ser autónoma. Heredar de un mixin no es una forma de especialización sino más bien un medio de obtener funcionalidad."

Gerardo Ruiz

student•

¿Son los mixing la mejor herramienta para "heredar" código rápidamente? ¿O hay otra?

Diego Forero

Team Platzi•

Más que heredar permiten no tener que repetir el escribir varias veces las mismas cosas y que si cambia un estilo particular puedas solo cambiar el mixin y todo donde se usa va a cambiar sin tener que estar haciendo una búsqueda y reemplazo dentro de todo el archivo.

Alberto Castro Flores

student•

Porque me manda este error cuando le mando el parametro al mixin de esta manera?:

@mixin max-width($page-max-width) {
 max-width: $page-max-width;
 margin: 0 auto;
}

section {
 @include max-width;
 background-color: $color-light_grey;
 padding: $padding;
}

CRISTIAN BARBERO PÉREZ

student•

Hola, es porque al definirlo pones que tiene que recibir un parámetro ($page-max-width) y luego al llamarlo no le pasas ningún parámetro.

@include max-width; //falta el parámetro
@include max-width(600px);

Alberto Castro Flores

student•

ah ya veo, gracias.

Jesus Federico David Herrera

student•

Los mixin no son iguales a las fuciones. Funciones -> permiten hacer calculos y retornar valores. Mixin -> permite reutilizar codigo similar

Sebastian Marin

student•

Los mixins son muy utiles, pero se me ha complicado un poco

Andrés Campuzano Garzón

student•

$maxwidth es una variable local? o la puedo usar globalmente?

Never Andrés Aparicio Hernandéz

student•

te sirve para todas, solo tienes que rectificar que tu archivo este importado. en este caso lo estamos importando en el archivo stylus.scss, igual que las variables las puedes utilizar donde quieras

Andrés Campuzano Garzón

student•

Gracias.

Germán González

student•

leeeento

Juan Camilo Alvarez Jurado

student•

Para eso está el multiplicador de velocidad de reproducción del video :P

Christian Velázquez

student•

Te recomiendo el curso de Preprocesadores(más rápido). Incluso el proyecto final está con Sass. Pero, éste curso te ayuda a complementar lo visto en Sass.

Vania Cárdenas Andrade

student•

Los mixin pueden ser parametricos, lo que quiere decir que pueden depender de un parámetro y cuando se llame desde un selector cambiar su valor.

Jhonatan David Ibarra Lavado

student•

sigamoos :D

Luis Fernando Pedroza Taborda

student•

La idea de los mixins es evitar la repeticion de codigo y proporcionar el resuso de funcionalidades alrededor de la aplicación.

Carlos Alberto Conde Moreno

student•

Definitivamente es muy versátil sass y ayuda mucho para el diseño

Alexis Steven Valderrama

student•

Es increíble como al ser humano le gusta complicar las cosas, entiendo que sass sirva para que el css sea escalable, pero vaya, esto ya parece react...

Andrés David Loaiza Zamudio

student•

👏👏👏

Continuando con Mixins

Preprocesador Sass

Qué aprenderás sobre Sass

Introducción al Curso de Sass

Diferencias entre Sass, Stylus y Less

Compilación de código en archivos CSS

Instalación

Estructura de CSS

Variables

Variables

Reto

Solución al reto

Anidaciones

Anidaciones

Mixins

Mixins

Continuando con Mixins

Uso de la directiva `content` (`block` en Stylus)

Extend

Funciones

Funciones

Directiva

Ejemplos de funciones

Reto

Reto - Solución

Controles de Flujo

Listas y directiva each

Ciclos FOR/EACH

Condicionales