Components

Mixins(SCSS)

Responsive mixins.

Version:	`4.0.3` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-scss`

Mixins

Responsive mixins

Helpful SCSS mixins for using media queries and setting breakpoints. These mixins are commonly used alongside variables from Thumbprint Tokens but do support arbitrary pixel values.

`tp-respond-between`

// Include this `import` at the top of your file.
@import '~@thumbtack/thumbprint-scss/mixins';
@include tp-respond-between($tp-breakpoint__small, $tp-breakpoint__medium) {
    // The CSS within this block will render between the specified breakpoints.
}

`tp-respond-above`

// Include this `import` at the top of your file.
@import '~@thumbtack/thumbprint-scss/mixins';
@include tp-respond-above($tp-breakpoint__small) {
    // The CSS within this block will render above specified breakpoint.
}

`tp-respond-below`

// Include this `import` at the top of your file.
@import '~@thumbtack/thumbprint-scss/mixins';
@include tp-respond-below($tp-breakpoint__large) {
    // The CSS within this block will render below the specified breakpoint.
}

Preventing overlap

Media queries are inclusive, meaning that if you use the same breakpoint value for both min-width and max-width—for example, 700px—the conditions will be true for both when the viewport is exactly 700px. This can lead to undesired results.

@media (min-width: 700px) {
    color: red; /* Applies "color:red" at 700px and above */
}
@media (max-width: 700px) {
    color: blue; /* Applies "color:blue" at 700px and below*/
}

To prevent this our Sass mixin tp-respond-above adds 1 to the min-width media query so that it applies to 701px and above while the max-width stays at 700px and below. Now the code will output:

@media (min-width: 701px) {
    color: red; /* Applies "color:red" at 701px and above */
}
@media (max-width: 700px) {
    color: blue; /* Applies "color:blue" at 700px and below*/
}