una/template/css/_remixins.less

// https://github.com/christopher-ramirez/remixings
// ===== REM UNIT MIXINS ====
@base-font-size-px: 15; // root's font size. @base-font-size-px MUST ME AN INTEGER.

// ===== FONT MIXINS =====
.font-size(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    font-size: @value;
    font-size: ~"@{rem-value}rem";    
}

.line-height(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    line-height: @value;
    line-height: ~"@{rem-value}rem";
}

.text-indent(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    text-indent: @value;
    text-indent: ~"@{rem-value}rem";
}


// ===== MARGIN MIXINS =====
.margin(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    margin: @value;
    margin: ~"@{rem-value}rem";
}

.margin(@vertical, @horizontal) {
    @rem-vvalue: (unit(@vertical) / @base-font-size-px);
    @rem-hvalue: (unit(@horizontal) / @base-font-size-px);
    margin: @vertical @horizontal;
    margin: ~"@{rem-vvalue}rem @{rem-hvalue}rem";
}

.margin-top(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    margin-top: @value;
    margin-top: ~"@{rem-value}rem";
}

.margin-right(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    margin-right: @value;
    margin-right: ~"@{rem-value}rem";
}

.margin-bottom(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    margin-bottom: @value;
    margin-bottom: ~"@{rem-value}rem";
}

.margin-left(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    margin-left: @value;
    margin-left: ~"@{rem-value}rem";
}


// ===== PADDING MIXINS =====
.padding(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    padding: @value;
    padding: ~"@{rem-value}rem";
}

.padding(@vertical, @horizontal) {
    @rem-vvalue: (unit(@vertical) / @base-font-size-px);
    @rem-hvalue: (unit(@horizontal) / @base-font-size-px);
    padding: @vertical @horizontal;
    padding: ~"@{rem-vvalue}rem @{rem-hvalue}rem";
}

.padding-top(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    padding-top: @value;
    padding-top: ~"@{rem-value}rem";
}

.padding-right(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    padding-right: @value;
    padding-right: ~"@{rem-value}rem";
}

.padding-bottom(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    padding-bottom: @value;
    padding-bottom: ~"@{rem-value}rem";
}

.padding-left(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    padding-left: @value;
    padding-left: ~"@{rem-value}rem";
}


// ===== POSITION MIXINS =====
.height(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    height: @value;
    height: ~"@{rem-value}rem";
}

.min-height(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    min-height: @value;
    min-height: ~"@{rem-value}rem";
}

.max-height(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    max-height: @value;
    max-height: ~"@{rem-value}rem";
}

.width(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    width: @value;
    width: ~"@{rem-value}rem";
}

.min-width(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    min-width: @value;
    min-width: ~"@{rem-value}rem";
}

.max-width(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    max-width: @value;
    max-width: ~"@{rem-value}rem";
}

.top(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    top: @value;
    top: ~"@{rem-value}rem";
}

.left(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    left: @value;
    left: ~"@{rem-value}rem";
}

.right(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    right: @value;
    right: ~"@{rem-value}rem";
}

.bottom(@value) {
    @rem-value: (unit(@value) / @base-font-size-px);
    bottom: @value;
    bottom: ~"@{rem-value}rem";
}