12/06/2017

SASS

❤Functions and operations

1.color values.

2.Apply styles.

3.Assign values (math operations).

4.Iterate on lists and maps.

❤fade-out

 changes a color by decreasing opacity.

❤fade-in

 changes a color by increasing opacity.

❤Example

 $color2 : fade-out($color,$amount);

❤SASS arithmetic operations

1.addition +

2.subtraction -

3.multiplication *

4.division /

5.module % (remainder)

❤Units are compatible in SASS.[we can not multiply pixels by ems]

❤In regular math, multiplying two units together results in squared units.(10px*10px=100px*px)

❤So,we would need to multiply 10px*10=100px.

❤For loop

@for $i from $begin through $end { 
  //some rules and or conditions 
}

❤We can use through or to.



.lemonade {
 border: 1px yellow; 
 background-color: #fdd;
 }

.strawberry {
 @extend .lemonade; 
 border-color: pink;
 }

❤@extend is working to apply the .lemonade rules to .strawberry.



❤ % (place holder) → extend


❤Mixin deal with arguments.
❤Place holder don't deal with arguments.