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 [string or number (converted to rems)]
• grid-row-gap [optional string or number (converted to rems), defaults to the given column gap]

// grid-columns repeat(4, 1fr), grid-col-gap 0.5rem, grid-row-gap 1rem
const TestNumbers = styled.div`
  ${grid(4, 8, 16)}
`;
// grid-columns repeat(3, 1fr), grid-col-gap 8px, grid-row-gap 16px
const TestStrings = styled.div`
  ${grid(3, '8px', '16px')}
`;

Sets row gap the same as colgap when only two params are given

// grid-columns repeat(5, 1fr), grid-col-gap 1rem, grid-row-gap 1rem
const TestAll = styled.div`
  ${grid(5, 16)}
`;

position

• position ["absolute", "fixed", "relative", etc]
• top [required string or number (converted to rems)]
• right [optional string or number (converted to rems), defaults to top]
• bottom [optional string or number (converted to rems), defaults to top]
• left [optional string or number (converted to rems), defaults to right or top]

const TestNumbers = styled.div`
  ${position('absolute', 0, 16, 32, 48)}
`;
const TestStrings = styled.div`
  ${position('absolute', '0', '16px', '32px', '48px')}
`;

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

// top/bottom/left/right 16
const TestAll = styled.div`
  ${position('fixed', 16)}
`;
// top/bottom 0, left/right 16
const TestXY = styled.div`
  ${position('fixed', 0, 16)}
`;
// top 0, left/right 16, bottom 32
const TestShort = styled.div`
  ${position('fixed', 0, 16, 32)}
`;