mixins javascript

1let bird = {
2  name: "Donald",
3  numLegs: 2
4};
5
6let plane = {
7  model: "777",
8  numPassengers: 524
9};
10
11let flyMixin = function(obj) {
12  obj.fly = function() {
13    console.log("Flying, wooosh!");
14  }
15};
16
17flyMixin(bird);
18flyMixin(plane);
19
20bird.fly(); // "Flying, wooosh!"
21plane.fly(); // "Flying, wooosh!"

1/*
2	Mixins are Sass functions that group CSS declarations together.
3	We can reuse them later like variables.
4
5	We can create a mixin with @mixin ex: @mixin variable-name {}
6	
7	we can create a mixin as a function show below and add parameters as well
8
9	After creating the mixin, we can use it in any class with @include command.
10	
11	This approach simplifies the code.
12*/
13
14/****example-1****/
15@mixin my-flex {
16  display:flex;
17  align-items:center;
18  justify-content:center;
19}
20
21/****example-2****/
22$font-color: red;
23@mixin my-font($font-color) {...}
24
25/****HOW TO USE****/
26div { 
27  @include my-flex; 
28}
29
30

1shantay