PostCSS one pixel border mixin

1px.css

/**
 * use the postcss-mixins plugin
 *
 * Usage:
 *     .item {
 *         position: relative;
 *     }
 *     .item:before {
 *         content: '';
 *         @mixin 1px top, #ddd;
 *      }
 *     .item:after {
 *         content: '';
 *         @mixin 1px bottom, #ddd;
 *      }
 */
@define-mixin 1px $direction: top, $color: #ccc {
    position: absolute;
    left: 0;
    right: 0;
    $(direction): 0;
    height: 1px;
    background: $color;
    transform: scaleY(0.5);
    transform-origin: $direction center;
}