scss function

by oktaviardi pratama

HTML

<h3>
  scss variables and function
</h3>
<p class="pl-32">
  test
</p>
<p class="pl-64">
  test
</p>
<p class="pl-100">
  test
</p>
<p class="pl-130">
  test
</p>

SCSS

$spaces : (
  "8" : 8px,
  "16" : 16px,
  "32" : 32px,
  "64" : 64px,
  "100" : 100px,
  "130" : 130px,
);

@each $space, $i in $spaces {
  .pb-#{$space} {
    padding-bottom: $i!important;
  }	
}
@each $space, $i in $spaces {
  .pt-#{$space} {
    padding-top: $i!important;
  }	
}
@each $space, $i in $spaces {
  .pr-#{$space} {
    padding-right: $i!important;
  }	
}
@each $space, $i in $spaces {
  .pl-#{$space} {
    padding-left: $i!important;
  }	
}
@each $space, $i in $spaces {
  .py-#{$space} {
    padding-block: $i!important;
  }	
}
@each $space, $i in $spaces {
  .px-#{$space} {
    padding-inline: $i!important;
  }	
}