Notes

Inter-unit CSS calculations

Edit on GitHub

CSS & Sass

calc() works for

  • px and rem
  • % and px
  • % and em
  • vw and px
1// Convert Pixels to Ems
2// (px / base-size) * 1em
3// multipley by 1em is to cnvert unit to em
4
5padding: (40px / 16px) * 1em
 1.container {
 2  width: calc(100vw - 80px);
 3}
 4
 5.container {
 6  width: calc(100% - 1em);
 7}
 8
 9.container {
10  width: calc(100% / 6);
11}
12``