em() function

.btn {
  @include p;
  padding: em(10px) em(20px);
}

Use this when you want an element to scale with the nearest font size near it. For example this button's padding will always be porportional to the font size. In this specific case it makes for less code than the vw solution.

i'm an em-padded btn vw padding

px() function

Mainly used for debugging. Talk to Cooper :p

rem() function

Convert px to rem.

vw() function

div {
  width: 100%;

  @media (min-width: #{$tl}px) {
    width: vw(300px);
  }
}

This function will allow us to input pixel sizes and output vw units, which is super handy for matching Figma, while keeping all elements scalable:

When your browser is at 1280px, this div will be 300px wide.

The box will keep scaling until it hits $siteMax-desktop. For mobile the box is 100%.

div {
  margin: vw(10px, mobile);

  @media (min-width: #{$tl}px) {
    margin: vw(30px);
  }
}

Lots of times we'll only use vw() for desktop scenarios but if you need to use it during mobile, pass in a mobile argument.

h1 – This is how we CSS

 
h1 {
  @include setType(32, 48);
}

setType() can be used with 2 arguments. Specify the mobile font size, and desktop font size, both of which should be available in Figma. It will automatically scale based on site settings.

h2 – Heading example


          h2 {
  @include setType(26, 40);
}

My favorite heading tag is h3


          h3 {
  @include setType(22, 33);
}

Sometime's h4's get neglected


          h4 {
  @include setType(20, 27);
}

But not as much as h5's


          h5 {
  @include setType(18, 23);
}

This h6 is a bit larger than the paragraph


          h6 {
  @include setType(16, 20);
}

This is an example paragraph tag. Sometimes for smaller fonts you want to override the smallest size it can go. In this case pass in the $minClamp argument which is the percentage the minimum font size should be. Set it to 100% to have it not scale any smaller than default.


          p {
  @include setType(14, 16, $minClamp: 94%);
}

This is an example paragraph with the class ".p--xs". For very small selectors you may not want it to ever scale smaller. The `minClamp` argument can also just be value on it's own:


          .p--xs {
  @include setType(10, 12, 100%);
}

i have a negative margin