Foundations

Magic Unit

scss:Ready
Viewport: px
<div class="exemple">
<div class="exemple__item exemple__item--25"></div>
<div class="exemple__item exemple__item--50"></div>
<div class="exemple__item exemple__item--75"></div>
<div class="exemple__item exemple__item--100"></div>
<div class="exemple__item exemple__item--125"></div>
<div class="exemple__item exemple__item--150"></div>
<div class="exemple__item exemple__item--175"></div>
<div class="exemple__item exemple__item--200"></div>
<div class="exemple__item exemple__item--250"></div>
<div class="exemple__item exemple__item--300"></div>
<div class="exemple__item exemple__item--350"></div>
<div class="exemple__item exemple__item--400"></div>
<div class="exemple__item exemple__item--500"></div>
<div class="exemple__item exemple__item--600"></div>
<div class="exemple__item exemple__item--700"></div>
<div class="exemple__item exemple__item--800"></div>
<div class="exemple__item exemple__item--900"></div>
<div class="exemple__item exemple__item--1000"></div>
<div class="exemple__item exemple__item--1200"></div>
<div class="exemple__item exemple__item--1400"></div>
<div class="exemple__item exemple__item--1600"></div>
<div class="exemple__item exemple__item--1800"></div>
<div class="exemple__item exemple__item--2000"></div>
</div>
Pixel valueVariable namemagic-unit-rem functionmagic-unit function
4px$mu025magic-unit-rem(0.25)magic-unit(0.25)
8px$mu050magic-unit-rem(0.5)magic-unit(0.5)
12px$mu075magic-unit-rem(0.75)magic-unit(0.75)
16px$mu100magic-unit-rem(1)magic-unit(1)
20px$mu125magic-unit-rem(1.25)magic-unit(1.25)
24px$mu150magic-unit-rem(1.5)magic-unit(1.5)
28px$mu175magic-unit-rem(1.75)magic-unit(1.75)
32px$mu200magic-unit-rem(2)magic-unit(2)
40px$mu250magic-unit-rem(2.5)magic-unit(2.5)
48px$mu300magic-unit-rem(3)magic-unit(3)
56px$mu350magic-unit-rem(3.5)magic-unit(3.5)
64px$mu400magic-unit-rem(4)magic-unit(4)
80px$mu500magic-unit-rem(5)magic-unit(5)
96px$mu600magic-unit-rem(6)magic-unit(6)
112px$mu700magic-unit-rem(7)magic-unit(7)
128px$mu800magic-unit-rem(8)magic-unit(8)
144px$mu900magic-unit-rem(9)magic-unit(9)
160px$mu1000magic-unit-rem(1.0)magic-unit(1.0)
etc...no more variablesmagic-unit-rem(...)magic-unit(...)