LESS mixin for margin that outputs value with pixel and rem values.

LESS margin mixin for pixel and rem values.less

.margin-top (@margin1: 16) {
    @margin1Value: (@margin1 / 10);
    margin-top: (@margin1 / 1px);
    margin-top: ~"@{margin1Value}rem";
}

.margin-right (@margin1: 16) {
    @margin1Value: (@margin1 / 10);
    margin-right: (@margin1 / 1px);
    margin-right: ~"@{margin1Value}rem";
}

.margin-bottom (@margin1: 16) {
    @margin1Value: (@margin1 / 10);
    margin-bottom: (@margin1 / 1px);
    margin-bottom: ~"@{margin1Value}rem";
}

.margin-left (@margin1: 16) {
    @margin1Value: (@margin1 / 10);
    margin-left: (@margin1 / 1px);
    margin-left: ~"@{margin1Value}rem";
}

.margin (@margin1: 16) {
    @margin1Value: (@margin1 / 10);
    margin: (@margin1 / 1px);
    margin: ~"@{margin1Value}rem";
}

.margin-two-values (@margin1: 16; @margin2: 16; @margin3: 16;) {
    @margin1Value: (@margin1 / 10);
    @margin2Value: (@margin2 / 10);
    margin: (@margin1 * 1px) (@margin2 * 1px);
    margin: ~"@{margin1Value}rem" ~"@{margin2Value}rem";
}

.margin-three-values (@margin1: 16; @margin2: 16; @margin3: 16;) {
    @margin1Value: (@margin1 / 10);
    @margin2Value: (@margin2 / 10);
    @margin3Value: (@margin3 / 10);
    margin: (@margin1 * 1px) (@margin2 * 1px) (@margin3 * 1px);
    margin: ~"@{margin1Value}rem" ~"@{margin2Value}rem" ~"@{margin3Value}rem";
}

.margin-four-values (@margin1: 16; @margin2: 16; @margin3: 16; @margin4: 16;) {
    @margin1Value: (@margin1 / 10);
    @margin2Value: (@margin2 / 10);
    @margin3Value: (@margin3 / 10);
    @margin4Value: (@margin4 / 10);
    margin: (@margin1 * 1px) (@margin2 * 1px) (@margin3 * 1px) (@margin4 * 1px);
    margin: ~"@{margin1Value}rem" ~"@{margin2Value}rem" ~"@{margin3Value}rem" ~"@{margin4Value}rem";
}