# hostinger/trunk/vue-frontend/src/scss/base/utilities.scss

Hostinger Tools, version trunk. 86 lines.

- Page: https://pluginprobe.com/plugins/hostinger/trunk/code/vue-frontend/src/scss/base/utilities.scss
- Raw: https://pluginprobe.com/plugins/hostinger/trunk/raw/vue-frontend/src/scss/base/utilities.scss
- Modified: 2025-09-09T07:18:12+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/hostinger/trunk/code/vue-frontend/src/scss/base/utilities.scss#L10-L20`.

```scss
@mixin padding-margin($mode) {
  @if $mode == general {
    $mode: '';
  } @else {
    $mode: '-' + $mode;
  }

  @for $i from 0 through 50 {
    $num: $i * 4;
    .h-m-#{$num}#{$mode} {
      margin: #{$num}px !important;
    }
    .h-mx-#{$num}#{$mode} {
      margin-left: #{$num}px !important;
      margin-right: #{$num}px !important;
    }
    .h-my-#{$num}#{$mode} {
      margin-top: #{$num}px !important;
      margin-bottom: #{$num}px !important;
    }
    .h-mt-#{$num}#{$mode} {
      margin-top: #{$num}px !important;
    }
    .h-mb-#{$num}#{$mode} {
      margin-bottom: #{$num}px !important;
    }
    .h-ml-#{$num}#{$mode} {
      margin-left: #{$num}px !important;
    }
    .h-mr-#{$num}#{$mode} {
      margin-right: #{$num}px !important;
    }

    .h-m-#{$num}#{$mode}-minus {
      margin: -#{$num}px !important;
    }
    .h-mx-#{$num}#{$mode}-minus {
      margin-left: -#{$num}px !important;
      margin-right: -#{$num}px !important;
    }
    .h-my-#{$num}#{$mode}-minus {
      margin-top: -#{$num}px !important;
      margin-bottom: -#{$num}px !important;
    }
    .h-mt-#{$num}#{$mode}-minus {
      margin-top: -#{$num}px !important;
    }
    .h-mb-#{$num}#{$mode}-minus {
      margin-bottom: -#{$num}px !important;
    }
    .h-ml-#{$num}#{$mode}-minus {
      margin-left: -#{$num}px !important;
    }
    .h-mr-#{$num}#{$mode}-minus {
      margin-right: -#{$num}px !important;
    }

    .h-p-#{$num}#{$mode} {
      padding: #{$num}px !important;
    }
    .h-px-#{$num}#{$mode} {
      padding-left: #{$num}px !important;
      padding-right: #{$num}px !important;
    }
    .h-py-#{$num}#{$mode} {
      padding-top: #{$num}px !important;
      padding-bottom: #{$num}px !important;
    }
    .h-pt-#{$num}#{$mode} {
      padding-top: #{$num}px !important;
    }
    .h-pb-#{$num}#{$mode} {
      padding-bottom: #{$num}px !important;
    }
    .h-pl-#{$num}#{$mode} {
      padding-left: #{$num}px !important;
    }
    .h-pr-#{$num}#{$mode} {
      padding-right: #{$num}px !important;
    }
  }
}

// no media query
@include padding-margin(general);

```