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