Mixins

Sass mixins to help develop responsive layouts

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 700pxand 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*/
}