Created
May 28, 2013 19:40
-
-
Save brandonb927/5665503 to your computer and use it in GitHub Desktop.
REM units mixin with PX fallback
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* 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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment