REM units mixin with PX fallback

rem.less

/**
 * REM units mixin with PX fallback for legacy browsers with no REM unit support
 * https://github.com/christopher-ramirez/remixings
 */
// ===== REM UNIT MIXINS ====
@base-font-size-px: 16; // root's font size. @base-font-size-px MUST ME AN INTEGER.
@pxtorem-js-function: ~`pxtorem = function(px){ if (typeof rmxsBaseFontSize == 'undefined')  rmxsBaseFontSize = @{base-font-size-px}; return (parseInt(px.replace(/(^\d+)(.+$)/i,'$1')) / rmxsBaseFontSize + 'rem') }`;

// ===== FONT MIXINS =====
.font-size(@value) {
    font-size: @value;
}

.font-size(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    font-size: @rem-value;
}

.line-height(@value) {
    line-height: @value;
}

.line-height(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    line-height: @rem-value;
}

.text-indent(@value) {
    text-indent: @value;
}

.text-indent(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    text-indent: @rem-value;
}

.background-size(@value1, @value2) {
    background-size: @value1 @value2;
}

.background-size(@height, @width) when (ispixel(@height)) and (ispixel(@width)) {
    @rem-hvalue: ~`pxtorem('@{height}')`;
    @rem-wvalue: ~`pxtorem('@{width}')`;
    background-size: @rem-hvalue @rem-wvalue;
}

// ===== MARGIN MIXINS =====
.margin(@value) {
    margin: @value;
}

.margin(@vvalue, @hvalue) {
    margin: @arguments;
}

.margin(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    margin: @rem-value;
}

.margin(@vertical, @horizontal) when (ispixel(@vertical)) and (ispixel(@horizontal)) {
    @rem-vvalue: ~`pxtorem('@{vertical}')`;
    @rem-hvalue: ~`pxtorem('@{horizontal}')`;
    margin: @rem-vvalue @rem-hvalue;
}

.margin(@vertical, @horizontal) when (ispixel(@vertical)) {
    @rem-value: ~`pxtorem('@{vertical}')`;
    .margin(@rem-value, @horizontal);
}

.margin(@vertical, @horizontal) when (ispixel(@horizontal)) {
    @rem-value: ~`pxtorem('@{horizontal}')`;
    .margin(@vertical, @rem-value);
}

.margin-top(@value) {
    margin-top: @value;
}

.margin-top(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    margin-top: @rem-value;
}

.margin-right(@value) {
    margin-right: @value;
}

.margin-right(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    margin-right: @rem-value;
}

.margin-bottom(@value) {
    margin-bottom: @value;
}

.margin-bottom(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    margin-bottom: @rem-value;
}

.margin-left(@value) {
    margin-left: @value;
}

.margin-left(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    margin-left: @rem-value;
}


// ===== PADDING MIXINS =====
.padding(@value) {
    padding: @value;
}

.padding(@vvalue, @hvalue) {
    padding: @arguments;
}

.padding(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    padding: @rem-value;
}

.padding(@vertical, @horizontal) when (ispixel(@vertical)) and (ispixel(@horizontal)) {
    @rem-vvalue: ~`pxtorem('@{vertical}')`;
    @rem-hvalue: ~`pxtorem('@{horizontal}')`;
    padding: @rem-vvalue @rem-hvalue;
}

.padding(@vertical, @horizontal) when (ispixel(@vertical)) {
    @rem-value: ~`pxtorem('@{vertical}')`;
    .padding(@rem-value, @horizontal);
}

.padding(@vertical, @horizontal) when (ispixel(@horizontal)) {
    @rem-value: ~`pxtorem('@{horizontal}')`;
    .padding(@vertical, @rem-value);
}

.padding-top(@value) {
    padding-top: @value;
}

.padding-top(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    padding-top: @rem-value;
}

.padding-right(@value) {
    padding-right: @value;
}

.padding-right(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    padding-right: @rem-value;
}

.padding-bottom(@value) {
    padding-bottom: @value;
}

.padding-bottom(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    padding-bottom: @rem-value;
}

.padding-left(@value) {
    padding-left: @value;
}

.padding-left(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    padding-left: @rem-value;
}


// ===== POSITION MIXINS =====
.height(@value) {
    height: @value;
}

.height(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    height: @rem-value;
}

.min-height(@value) {
    min-height: @value;
}

.min-height(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    min-height: @rem-value;
}

.max-height(@value) {
    max-height: @value;
}

.max-height(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    max-height: @rem-value;
}

.width(@value) {
    width: @value;
}

.width(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    width: @rem-value;
}

.min-width(@value) {
    min-width: @value;
}

.min-width(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    min-width: @rem-value;
}

.max-width(@value) {
    max-width: @value;
}

.max-width(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    max-width: @rem-value;
}

.size(@value) {
    .height(@value);
    .width(@value);
}

.size(@height, @width) {
    .height(@height);
    .width(@width);
}

.top(@value) {
    top: @value;
}

.top(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    top: @rem-value;
}

.left(@value) {
    left: @value;
}

.left(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    left: @rem-value;
}

.right(@value) {
    right: @value;
}

.right(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    right: @rem-value;
}

.bottom(@value) {
    bottom: @value;
}

.bottom(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    bottom: @rem-value;
}

.border-width(@value) {
    border-width: @value;
}

.border-width(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    border-width: @rem-value;
}

.border-top-width(@value) {
    border-top-width: @value;
}

.border-top-width(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    border-top-width: @rem-value;
}

.border-bottom-width(@value) {
    border-bottom-width: @value;
}

.border-bottom-width(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    border-bottom-width: @rem-value;
}

.border-left-width(@value) {
    border-left-width: @value;
}

.border-left-width(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    border-left-width: @rem-value;
}

.border-right-width(@value) {
    border-right-width: @value;
}

.border-right-width(@value) when (ispixel(@value)) {
    @rem-value: ~`pxtorem('@{value}')`;
    border-right-width: @rem-value;
}