Margin

Margin

Syntax (custom)

```other code
    //Utilities
    margin: ("mg",4), 
    // First Element is name of utility : "mg"
    // Second Element is maximum number of margin units : 4
```

Syntax

To give margin , there are 7 ways to give margin

• .mg-{num} :margin:{num};

• .mg-top-{num} : margin-top:{num};

• .mg-bottom-{num} : margin-bottom:{num};

• .mg-right-{num} : margin-right:{num};

• .mg-left-{num} : margin-left:{num};

• .mg-x-{num} : margin-right:{num}; margin-left:{num}

• .mg-y-{num} : margin-top:{num}; margin-bottom:{num}

Rules of {num}

possible values :

• 0

• 1

• 2

• 3

• 4

$base-unit-margin : 1;


// Compiled as :- margin : {some number};

@mixin margin-utility($num) {
    .mg-#{$num} {
      margin: #{$num*$base-unit-margin}px;
    }
  }
  
  @include margin-utility(0);
  @include margin-utility(1);
  @include margin-utility(2);
  @include margin-utility(3);
  @include margin-utility(4);






// Syntax :- pd-{direction}-{some number}
// Compiled as :- margin-{direction} : {some number};


// margin top
@mixin margin-top-utility($num) {
  .mg-top-#{$num} {
    margin-top: #{$num*$base-unit-margin}px;
  }
}
@include margin-top-utility(0);
@include margin-top-utility(1);
@include margin-top-utility(2);
@include margin-top-utility(3);
@include margin-top-utility(4);




//margin bottom
@mixin margin-bottom-utility($num) {
  .mg-bottom-#{$num} {
    margin-bottom: #{$num*$base-unit-margin}px;
  }
}
@include margin-bottom-utility(0);
@include margin-bottom-utility(1);
@include margin-bottom-utility(2);
@include margin-bottom-utility(3);
@include margin-bottom-utility(4);




//margin right
@mixin margin-right-utility($num) {
  .mg-right-#{$num} {
    margin-right: #{$num*$base-unit-margin}px;
  }
}
@include margin-right-utility(0);
@include margin-right-utility(1);
@include margin-right-utility(2);
@include margin-right-utility(3);
@include margin-right-utility(4);



//margin left
@mixin margin-left-utility($num) {
  .mg-left-#{$num} {
    margin-left: #{$num*$base-unit-margin}px;
  }
}
@include margin-left-utility(0);
@include margin-left-utility(1);
@include margin-left-utility(2);
@include margin-left-utility(3);
@include margin-left-utility(4);






//margin horizontal
@mixin margin-horizontal-utility($num) {
  .mg-x-#{$num} {
    margin-right: #{$num*$base-unit-padding}rem;
    margin-left: #{$num*$base-unit-padding}rem;
  }
}
@include margin-horizontal-utility(0);
@include margin-horizontal-utility(1);
@include margin-horizontal-utility(2);
@include margin-horizontal-utility(3);
@include margin-horizontal-utility(4);

//margin vertical
@mixin margin-vertical-utility($num) {
  .mg-y-#{$num} {
    margin-top: #{$num*$base-unit-padding}rem;
    margin-bottom: #{$num*$base-unit-padding}rem;
  }
}
@include margin-vertical-utility(0);
@include margin-vertical-utility(1);
@include margin-vertical-utility(2);
@include margin-vertical-utility(3);
@include margin-vertical-utility(4);