CSS Position Shorthand

[Rugg]

Interested to know if there’s any future hope for positioning shorthand syntax?

For example: position: fixed 20px 60px 40px 80px;

Any thoughts?

[Alen]

If you’re using pre-processing you could write your own mixin or function and create a shorthand. In Sass something like this:

@mixin pos(
  $p:static,
  $t:10,
  $b:10,
  $l:10,
  $r:10)
{
  position:$p;
  top:#{$t}px;
  bottom:#{$b}px;
  left:#{$l}px;
  right:#{$r}px;
}

And use it as:

.my-fixed-module-1{
  @include pos(fixed);
}

You can over-ride all variables if needed:

.my-fixed-module-2{
  @include pos(fixed,20,20,150,150);
}

http://codepen.io/alenabdula/pen/mjxiK

[Author]

Posts