Skip to content

Instantly share code, notes, and snippets.

@dreamyguy

dreamyguy/visualising-margins-for-ux-debugging_a.scss

Last active April 5, 2019 08:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dreamyguy/ee42496a44ad49927917df280064eb4e to your computer and use it in GitHub Desktop.
Save dreamyguy/ee42496a44ad49927917df280064eb4e to your computer and use it in GitHub Desktop.
Download ZIP
Visualising margins for UX Debugging [1 of 6]
Raw
visualising-margins-for-ux-debugging_a.scss
$sides: (top, bottom, left, right);
$space-values: (2, 5, 10, 15, 20, 30, 40, 50, 60);
@each $side in $sides {
@for $i from 1 through length($space-values) {
$value: nth($space-values, $i);
.m-#{str-slice($side, 0, 1)}-#{$value} {
margin-#{$side}: #{$value}px;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment