Mixins

rem

• number (required)
• base (optional, default 16)

const Test = styled.div`
  height: ${rem(420)};
`;

opacify

• color (hex, rgb, or rgba format)
• adjustment (how much more opaque, from 0-none to 1-fully opaque)

const Test = styled.div`
  background: ${opacify('#FFFFFF', 0.5)};
  color: ${opacify('rgba(0, 0, 0, 0.5)', 0.2)};
`;

transparentize

• color (hex, rgb, or rgba format)
• adjustment (how much more transparent, from 0-none to 1-fully transparent)

const Test = styled.div`
  background: ${transparentize('#FFFFFF', 0.5)};
  color: ${transparentize('rgba(0, 0, 0, 0.7)', 0.4)};
`;

flex

Save a few lines with the most common flex attributes

• flex-direction (row, column, row-reverse, etc)
• align-items (center, flex-start, etc)
• justify-content (center, space-between, etc)

const Test = styled.div`
  ${flex('row', 'center', 'flex-start')}
`;

grid

Save a few lines with the most common grid configuration

• grid-columns (number, which translates to "repeat(number, 1fr)")
• grid-col-gap (number)
• grid-row-gap (optional, and defaults to the given column gap)

const Test = styled.div`
  ${grid(4, 10, 20)}
`;

position

• position ("absolute", "fixed", "relative", etc)
• top (required)
• right (optional, defaults to top)
• bottom (optional, defaults to top)
• left (optional, defaults to right or top)

const Test = styled.div`
  ${position('absolute', '1rem', '2rem', '3rem', '4rem')}
`;

Also works the same as normal CSS shorthand (border, margin, and padding)

const Test = styled.div`
  ${position('fixed', 0)}
`;