Development

Stylus mixin for fast setting CSS position (top, right, bottom, left) of positioned elements

Stylus mixin for fast setting CSS position (top, right, bottom, left) of positioned elements

If you have a absolute or fixed positioned element you have to set at least one of top, right, bottom or left properties. Otherwise positioning may not work or may behave unexpectedly. Very often there is a need in setting almost all or all of these properties. You may have fun writing:

top: 0;
right: 0;
bottom: 0;
left: 0;

but it feels that it could done better and faster. For example the same way as it is done for margin or padding: you can specify any number of arguments from one to four and they will mean different things:

padding: 1px; /* all sides will have 1px padding */
padding: 1px 2px; /* padding-top and padding-bottom are 1px, padding-left and padding-right are 2px */
padding: 1px 2px 3px; /* padding-top is 1px, padding-bottom is 3px, padding-left and padding-right are 2px */
padding: 1px 2px 3px 4pxx; /* padding-top is 1px, padding-right is 2px, padding-bottom is 3px and padding-left is 4px */

We can use the same level of verbosity for top, right, bottom and left properties. Lets define a mixin like this (trbl stands for toprightbottomleft):

trbl(t, args...)
  // Top
  top t

  // Right
  if args[0] is a 'unit'
    right args[0]
  else
    right t

  // Bottom
  if args[1] is a 'unit'
    bottom args[1]
  else
    bottom t

  // Left
  if args[2] is a 'unit'
    left args[2]
  else if args[0] is a 'unit'
    left args[0]
  else
    left t

Now it is easy to use it. Here are some examples:

trbl: 0;
/* Similar to */
top: 0;
right: 0;
left: 0;
bottom: 0;

trbl: 1px 2px;
/* Similar to */
top: 1px;
right: 2px;
bottom: 1px;
left: 2px;

trbl: 1px 2px 3px;
/* Similar to*/
top: 1px;
right: 2px;
bottom: 3px;
left: 2px;

trbl: 1px 2px 3px 4px;
/* Similar to */
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;

And if you need all properties except top set to some value you can do:

trbl: auto 2px 3px 4px;

This way top property will stay default and you’ll get only those properties that you need.