Skip to content

Instantly share code, notes, and snippets.

@daphotron
Created September 25, 2015 15:37
Show Gist options
  • Save daphotron/4715ac7509afcce2eb7a to your computer and use it in GitHub Desktop.
Save daphotron/4715ac7509afcce2eb7a to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// libsass (v3.2.5)
// ----
// Spacing Mixins
// --------------------------------------------------
$orientation_list: (
v,
h,
a
);
$direction_list: (
(t, top),
(r, right),
(b, bottom),
(l, left)
);
$space_sizes:
(n, 0px),
(s, 5px),
(m, 7px),
(l, 10px),
(xl, 20px),
(xxl, 40px),
(xxxl, 120px)
;
@each $direction_list, $direction in $direction_list {
@each $space_sizes, $size in $space_sizes {
.p#{$direction_list}#{$space_sizes} {
padding-#{$direction}: $size !important;
}
.m#{$direction_list}#{$space_sizes} {
margin-#{$direction}: $size !important;
}
}
}
@each $orientation_list, $orientation in $orientation_list {
@each $space_sizes, $size in $space_sizes {
@if $orientation_list == "v" {
.p#{$orientation_list}#{$space_sizes} {
padding-bottom: $size !important;
padding-top: $size !important;
}
.m#{$orientation_list}#{$space_sizes} {
margin-bottom: $size !important;
margin-top: $size !important;
}
}
@else if $orientation_list == "h" {
.p#{$orientation_list}#{$space_sizes} {
padding-left: $size !important;
padding-right: $size !important;
}
.m#{$orientation_list}#{$space_sizes} {
margin-left: $size !important;
margin-right: $size !important;
}
}
@else {
.p#{$orientation_list}#{$space_sizes} {
padding: $size !important;
}
.m#{$orientation_list}#{$space_sizes} {
margin: $size !important;
}
}
}
}
.ptn {
padding-top: 0px !important;
}
.mtn {
margin-top: 0px !important;
}
.pts {
padding-top: 5px !important;
}
.mts {
margin-top: 5px !important;
}
.ptm {
padding-top: 7px !important;
}
.mtm {
margin-top: 7px !important;
}
.ptl {
padding-top: 10px !important;
}
.mtl {
margin-top: 10px !important;
}
.ptxl {
padding-top: 20px !important;
}
.mtxl {
margin-top: 20px !important;
}
.ptxxl {
padding-top: 40px !important;
}
.mtxxl {
margin-top: 40px !important;
}
.ptxxxl {
padding-top: 120px !important;
}
.mtxxxl {
margin-top: 120px !important;
}
.prn {
padding-right: 0px !important;
}
.mrn {
margin-right: 0px !important;
}
.prs {
padding-right: 5px !important;
}
.mrs {
margin-right: 5px !important;
}
.prm {
padding-right: 7px !important;
}
.mrm {
margin-right: 7px !important;
}
.prl {
padding-right: 10px !important;
}
.mrl {
margin-right: 10px !important;
}
.prxl {
padding-right: 20px !important;
}
.mrxl {
margin-right: 20px !important;
}
.prxxl {
padding-right: 40px !important;
}
.mrxxl {
margin-right: 40px !important;
}
.prxxxl {
padding-right: 120px !important;
}
.mrxxxl {
margin-right: 120px !important;
}
.pbn {
padding-bottom: 0px !important;
}
.mbn {
margin-bottom: 0px !important;
}
.pbs {
padding-bottom: 5px !important;
}
.mbs {
margin-bottom: 5px !important;
}
.pbm {
padding-bottom: 7px !important;
}
.mbm {
margin-bottom: 7px !important;
}
.pbl {
padding-bottom: 10px !important;
}
.mbl {
margin-bottom: 10px !important;
}
.pbxl {
padding-bottom: 20px !important;
}
.mbxl {
margin-bottom: 20px !important;
}
.pbxxl {
padding-bottom: 40px !important;
}
.mbxxl {
margin-bottom: 40px !important;
}
.pbxxxl {
padding-bottom: 120px !important;
}
.mbxxxl {
margin-bottom: 120px !important;
}
.pln {
padding-left: 0px !important;
}
.mln {
margin-left: 0px !important;
}
.pls {
padding-left: 5px !important;
}
.mls {
margin-left: 5px !important;
}
.plm {
padding-left: 7px !important;
}
.mlm {
margin-left: 7px !important;
}
.pll {
padding-left: 10px !important;
}
.mll {
margin-left: 10px !important;
}
.plxl {
padding-left: 20px !important;
}
.mlxl {
margin-left: 20px !important;
}
.plxxl {
padding-left: 40px !important;
}
.mlxxl {
margin-left: 40px !important;
}
.plxxxl {
padding-left: 120px !important;
}
.mlxxxl {
margin-left: 120px !important;
}
.pvn {
padding-bottom: 0px !important;
padding-top: 0px !important;
}
.mvn {
margin-bottom: 0px !important;
margin-top: 0px !important;
}
.pvs {
padding-bottom: 5px !important;
padding-top: 5px !important;
}
.mvs {
margin-bottom: 5px !important;
margin-top: 5px !important;
}
.pvm {
padding-bottom: 7px !important;
padding-top: 7px !important;
}
.mvm {
margin-bottom: 7px !important;
margin-top: 7px !important;
}
.pvl {
padding-bottom: 10px !important;
padding-top: 10px !important;
}
.mvl {
margin-bottom: 10px !important;
margin-top: 10px !important;
}
.pvxl {
padding-bottom: 20px !important;
padding-top: 20px !important;
}
.mvxl {
margin-bottom: 20px !important;
margin-top: 20px !important;
}
.pvxxl {
padding-bottom: 40px !important;
padding-top: 40px !important;
}
.mvxxl {
margin-bottom: 40px !important;
margin-top: 40px !important;
}
.pvxxxl {
padding-bottom: 120px !important;
padding-top: 120px !important;
}
.mvxxxl {
margin-bottom: 120px !important;
margin-top: 120px !important;
}
.phn {
padding-left: 0px !important;
padding-right: 0px !important;
}
.mhn {
margin-left: 0px !important;
margin-right: 0px !important;
}
.phs {
padding-left: 5px !important;
padding-right: 5px !important;
}
.mhs {
margin-left: 5px !important;
margin-right: 5px !important;
}
.phm {
padding-left: 7px !important;
padding-right: 7px !important;
}
.mhm {
margin-left: 7px !important;
margin-right: 7px !important;
}
.phl {
padding-left: 10px !important;
padding-right: 10px !important;
}
.mhl {
margin-left: 10px !important;
margin-right: 10px !important;
}
.phxl {
padding-left: 20px !important;
padding-right: 20px !important;
}
.mhxl {
margin-left: 20px !important;
margin-right: 20px !important;
}
.phxxl {
padding-left: 40px !important;
padding-right: 40px !important;
}
.mhxxl {
margin-left: 40px !important;
margin-right: 40px !important;
}
.phxxxl {
padding-left: 120px !important;
padding-right: 120px !important;
}
.mhxxxl {
margin-left: 120px !important;
margin-right: 120px !important;
}
.pan {
padding: 0px !important;
}
.man {
margin: 0px !important;
}
.pas {
padding: 5px !important;
}
.mas {
margin: 5px !important;
}
.pam {
padding: 7px !important;
}
.mam {
margin: 7px !important;
}
.pal {
padding: 10px !important;
}
.mal {
margin: 10px !important;
}
.paxl {
padding: 20px !important;
}
.maxl {
margin: 20px !important;
}
.paxxl {
padding: 40px !important;
}
.maxxl {
margin: 40px !important;
}
.paxxxl {
padding: 120px !important;
}
.maxxxl {
margin: 120px !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment