package: '@thumbtack/tp-ui-core-function' kit: functions/index.mdx platform: scss url: /components/functions/scss/ mdxType: componentApi deprecated: This package and tp-spacer were deprecated on September 11 in favor of margin and padding classes from Thumbprint Atomic or tokens from Thumbprint Tokens.

Import and usage

When using margin or padding vales in your Sass use the tp-spacer(N) function where N is an increment of 0.5. Our base spacer unit is 8px.

You should default to using the spacer function whenever possible but when building components that internally require small, precise spacing it is okay not to use the spacer function.

// Include this `import` at the top of your file.
@import '@thumbtack/tp-ui-core-function/_index';

.my-component {
    margin-bottom: tp-spacer(2); // equivalent to 16px
    padding: 0 tp-spacer(2.5); // equivalent to 20px
}

HTML Classes

For spacing classes to use in your HTML see Thumbprint Atomic.