Skip to content

Instantly share code, notes, and snippets.

@jdlich
Created June 5, 2015 02:29
Show Gist options
  • Save jdlich/9c82df2e67e8c01723b7 to your computer and use it in GitHub Desktop.
Save jdlich/9c82df2e67e8c01723b7 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
@mixin position-helpers($breakpoint:"") {
@each $side in "top", "right", "bottom", "left" {
.#{$breakpoint}position-#{$side} {
position: absolute;
#{$side}: 0;
}
@each $direction in "up", "down" {
@for $num from 1 through 7 {
$scale-position: #{$direction}-#{$num};
.#{$breakpoint}position-#{$side}--#{$scale-position} {
position: absolute;
#{$side}: box-scale(if($direction == up, $num, -$num));
}
}
}
}
}
@include position-helpers();
.position-top {
position: absolute;
top: 0;
}
.position-top--up-1 {
position: absolute;
top: box-scale(1);
}
.position-top--up-2 {
position: absolute;
top: box-scale(2);
}
.position-top--up-3 {
position: absolute;
top: box-scale(3);
}
.position-top--up-4 {
position: absolute;
top: box-scale(4);
}
.position-top--up-5 {
position: absolute;
top: box-scale(5);
}
.position-top--up-6 {
position: absolute;
top: box-scale(6);
}
.position-top--up-7 {
position: absolute;
top: box-scale(7);
}
.position-top--down-1 {
position: absolute;
top: box-scale(-1);
}
.position-top--down-2 {
position: absolute;
top: box-scale(-2);
}
.position-top--down-3 {
position: absolute;
top: box-scale(-3);
}
.position-top--down-4 {
position: absolute;
top: box-scale(-4);
}
.position-top--down-5 {
position: absolute;
top: box-scale(-5);
}
.position-top--down-6 {
position: absolute;
top: box-scale(-6);
}
.position-top--down-7 {
position: absolute;
top: box-scale(-7);
}
.position-right {
position: absolute;
right: 0;
}
.position-right--up-1 {
position: absolute;
right: box-scale(1);
}
.position-right--up-2 {
position: absolute;
right: box-scale(2);
}
.position-right--up-3 {
position: absolute;
right: box-scale(3);
}
.position-right--up-4 {
position: absolute;
right: box-scale(4);
}
.position-right--up-5 {
position: absolute;
right: box-scale(5);
}
.position-right--up-6 {
position: absolute;
right: box-scale(6);
}
.position-right--up-7 {
position: absolute;
right: box-scale(7);
}
.position-right--down-1 {
position: absolute;
right: box-scale(-1);
}
.position-right--down-2 {
position: absolute;
right: box-scale(-2);
}
.position-right--down-3 {
position: absolute;
right: box-scale(-3);
}
.position-right--down-4 {
position: absolute;
right: box-scale(-4);
}
.position-right--down-5 {
position: absolute;
right: box-scale(-5);
}
.position-right--down-6 {
position: absolute;
right: box-scale(-6);
}
.position-right--down-7 {
position: absolute;
right: box-scale(-7);
}
.position-bottom {
position: absolute;
bottom: 0;
}
.position-bottom--up-1 {
position: absolute;
bottom: box-scale(1);
}
.position-bottom--up-2 {
position: absolute;
bottom: box-scale(2);
}
.position-bottom--up-3 {
position: absolute;
bottom: box-scale(3);
}
.position-bottom--up-4 {
position: absolute;
bottom: box-scale(4);
}
.position-bottom--up-5 {
position: absolute;
bottom: box-scale(5);
}
.position-bottom--up-6 {
position: absolute;
bottom: box-scale(6);
}
.position-bottom--up-7 {
position: absolute;
bottom: box-scale(7);
}
.position-bottom--down-1 {
position: absolute;
bottom: box-scale(-1);
}
.position-bottom--down-2 {
position: absolute;
bottom: box-scale(-2);
}
.position-bottom--down-3 {
position: absolute;
bottom: box-scale(-3);
}
.position-bottom--down-4 {
position: absolute;
bottom: box-scale(-4);
}
.position-bottom--down-5 {
position: absolute;
bottom: box-scale(-5);
}
.position-bottom--down-6 {
position: absolute;
bottom: box-scale(-6);
}
.position-bottom--down-7 {
position: absolute;
bottom: box-scale(-7);
}
.position-left {
position: absolute;
left: 0;
}
.position-left--up-1 {
position: absolute;
left: box-scale(1);
}
.position-left--up-2 {
position: absolute;
left: box-scale(2);
}
.position-left--up-3 {
position: absolute;
left: box-scale(3);
}
.position-left--up-4 {
position: absolute;
left: box-scale(4);
}
.position-left--up-5 {
position: absolute;
left: box-scale(5);
}
.position-left--up-6 {
position: absolute;
left: box-scale(6);
}
.position-left--up-7 {
position: absolute;
left: box-scale(7);
}
.position-left--down-1 {
position: absolute;
left: box-scale(-1);
}
.position-left--down-2 {
position: absolute;
left: box-scale(-2);
}
.position-left--down-3 {
position: absolute;
left: box-scale(-3);
}
.position-left--down-4 {
position: absolute;
left: box-scale(-4);
}
.position-left--down-5 {
position: absolute;
left: box-scale(-5);
}
.position-left--down-6 {
position: absolute;
left: box-scale(-6);
}
.position-left--down-7 {
position: absolute;
left: box-scale(-7);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment