The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › CSS Position Shorthand
Interested to know if there’s any future hope for positioning shorthand syntax?
For example: position: fixed 20px 60px 40px 80px;
position: fixed 20px 60px 40px 80px;
Any thoughts?
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