Skip to content

Instantly share code, notes, and snippets.

@renaudtertrais
Last active February 5, 2022 17:34
Show Gist options
  • Save renaudtertrais/870d54c3c4de67ee8887 to your computer and use it in GitHub Desktop.
Save renaudtertrais/870d54c3c4de67ee8887 to your computer and use it in GitHub Desktop.
Sass position mixins
// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----
@mixin pos-absolute($positions...){
position: absolute;
@include position($positions...);
}
@mixin pos-fixed($positions...){
position: fixed;
@include position($positions...);
}
@mixin position($positions...){
$positions: parseDirections($positions);
top: map-get($positions,'top');
right: map-get($positions,'right');
bottom: map-get($positions,'bottom');
left: map-get($positions,'left');
}
@function parseDirections($directions){
$top: 0; $bottom: 0; $left: 0; $right: 0;
@if length($directions) > 0{
$d1: nth($directions,1);
$top: $d1; $bottom: $d1; $left: $d1; $right: $d1;
}@if length($directions) > 1 {
$d2: nth($directions,2);
$left: $d2; $right: $d2;
}@if length($directions) > 2 {
$d3: nth($directions,3);
$bottom: $d3;
}@if length($directions) > 3 {
$d4: nth($directions,4);
$left: $d4
}
@return (
top: $top,
bottom: $bottom,
left: $left,
right: $right
);
}
.test0{
@include pos-absolute();
}
.test1{
@include pos-absolute(10px);
}
.test2{
@include pos-absolute(10px,20px);
}
.test3{
@include pos-absolute(10px,20px,30px);
}
.test4{
@include pos-absolute(10px,20px,30px,40px);
}
.test0 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.test1 {
position: absolute;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
}
.test2 {
position: absolute;
top: 10px;
right: 20px;
bottom: 10px;
left: 20px;
}
.test3 {
position: absolute;
top: 10px;
right: 20px;
bottom: 30px;
left: 20px;
}
.test4 {
position: absolute;
top: 10px;
right: 20px;
bottom: 30px;
left: 40px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment