Skip to content

Instantly share code, notes, and snippets.

@agarzola
Last active January 2, 2016 05:49
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save agarzola/8259333 to your computer and use it in GitHub Desktop.
Save agarzola/8259333 to your computer and use it in GitHub Desktop.
This mixin takes a CSS property and a value (which can be shorthand) and return that property set first in pixels and then in rems. Shorthand may include `auto`. Default unit is set to `px` but can be set to `rem` is that’s what you want. It also presumes your base `font-size` to be `10px` (62.5%).
@mixin rempx($property,$value,$unit:"px")
$pxcon: null !default
$remcon: null !default
$px: null !default
$rem: null !default
@if $unit == "px"
$pxcon: 1
$remcon: .1
@else
$pxcon: 10
$remcon: 1
@if type-of($value) == "number"
$px: #{($value * $pxcon)}px
$rem: #{($value * $remcon)}rem
@else
@each $val in $value
@if $px == null
@if type-of($val) == "number"
$px: #{($val * $pxcon)}px
$rem: #{($val * $remcon)}rem
@else
$px: #{$val}
$rem: #{$val}
@else
@if type-of($val) == "number"
$px: $px + " #{($val * $pxcon)}px"
$rem: $rem + " #{($val * $remcon)}rem"
@else
$px: $px + " #{$val}"
$rem: $rem + " #{$val}"
#{$property}: #{$px}
#{$property}: #{$rem}
html
font-size: 62.5%
section
@include rempx(margin,50 auto 20)
@include rempx(width,50,rem)
&.intro
html {
font-size: 62.5%;
}
section {
margin: 50px auto 20px;
margin: 5rem auto 2rem;
width: 500px;
width: 50rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment