Skip to content

Instantly share code, notes, and snippets.

@rebotak

rebotak/spacers.scss

Forked from victorS7P/spacers.scss
Created March 3, 2021 02:41
Download ZIP

Revisions

  1. rebotak revised this gist Mar 3, 2021. No changes.
  2. @victorS7P victorS7P revised this gist Feb 17, 2019. 1 changed file with 21 additions and 9 deletions.
    30 changes: 21 additions & 9 deletions spacers.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -7,18 +7,30 @@ $positions: (
    y: ('top', 'bottom')
    );

    @each $var, $value in $positions {
    @each $pos in $value {
    @for $i from 0 to 6 {
    @each $prop, $propValue in (m: 'margin', p: 'padding') {
    .#{$prop}#{$var}-#{$i} {
    #{$propValue}-#{$pos}: ($i * .5em);
    @mixin sizeValue($prop, $i) {
    #{$prop}: ($i * .5em);
    };

    @for $i from 0 to 6 {
    @each $prop, $propValue in (m: 'margin', p: 'padding') {
    .#{$prop}-#{$i} {
    @include sizeValue((#{$propValue}), $i);
    }

    @each $var, $value in $positions {
    .#{$prop}#{$var}-#{$i} {
    @each $pos in $value {
    @include sizeValue((#{$propValue}-#{$pos}), $i);
    }
    }
    }

    .m#{$var}-auto {
    margin-#{$pos}: auto;
    @if ($i == 0 and $prop == 'm') {
    .m#{$var}-auto {
    @each $pos in $value {
    margin-#{$pos}: auto;
    }
    }
    }
    }
    }
    }
  3. @victorS7P victorS7P revised this gist Feb 17, 2019. No changes.
  4. @victorS7P victorS7P revised this gist Feb 17, 2019. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion spacers.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -12,7 +12,7 @@ $positions: (
    @for $i from 0 to 6 {
    @each $prop, $propValue in (m: 'margin', p: 'padding') {
    .#{$prop}#{$var}-#{$i} {
    #{$propValue}-#{$pos}: ($i * .5) + 'em';
    #{$propValue}-#{$pos}: ($i * .5em);
    }
    }
    }
  5. @victorS7P victorS7P revised this gist Feb 17, 2019. 1 changed file with 9 additions and 5 deletions.
    14 changes: 9 additions & 5 deletions spacers.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -7,14 +7,18 @@ $positions: (
    y: ('top', 'bottom')
    );

    @for $i from 0 to 5 {
    @each $var, $value in $positions {
    @each $prop, $propValue in (m: 'margin', p: 'padding') {
    .#{$prop}#{$var}-#{$i} {
    @each $pos in $value {
    @each $var, $value in $positions {
    @each $pos in $value {
    @for $i from 0 to 6 {
    @each $prop, $propValue in (m: 'margin', p: 'padding') {
    .#{$prop}#{$var}-#{$i} {
    #{$propValue}-#{$pos}: ($i * .5) + 'em';
    }
    }
    }

    .m#{$var}-auto {
    margin-#{$pos}: auto;
    }
    }
    }
  6. @victorS7P victorS7P created this gist Feb 17, 2019.
    20 changes: 20 additions & 0 deletions spacers.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    $positions: (
    t: ('top'),
    r: ('right'),
    b: ('bottom'),
    l: ('left'),
    x: ('left', 'right'),
    y: ('top', 'bottom')
    );

    @for $i from 0 to 5 {
    @each $var, $value in $positions {
    @each $prop, $propValue in (m: 'margin', p: 'padding') {
    .#{$prop}#{$var}-#{$i} {
    @each $pos in $value {
    #{$propValue}-#{$pos}: ($i * .5) + 'em';
    }
    }
    }
    }
    }