How do I change compass break points? when using respond-to mixin

Question

I am using compass and sass (scss) to create CSS files. I believe the tablet breakpoint is too wide. The first breakpoint for my mobile-first website begins around 700px.

How do change the tablet breakpoint to be 360px? (ish)

// breakpoint is around 700px
@include respond-to(tablet) {
    margin: 0;
}

score 0 · Answer 1 · answered Apr 04 '14 at 17:34

Your mixin should look something like that:

@mixin respond-to($media) {
    @if $media == smartphone {
        @media screen and (min-device-width: $break-smartphone) { @content; }
    }
    @if $media == smartphone-only {
        @media screen and (min-width: $break-smartphone) and (max-width: $break-tablet) { @content; }
    }
    @if $media == tablet {
        @media screen and (min-width: $break-tablet) { @content; }
    }
    @if $media == tablet-only {
        @media screen and (min-width: $break-tablet) and (max-width: $break-widescreen) { @content; }
    }
    @if $media == mobile-only {
        @media screen and (max-width: $break-widescreen) { @content; }
    }
    @if $media == widescreen {
        @media screen and (min-width: $break-widescreen - $webkit-scrollbar-width) and (min-device-width: $force-tablet ) { @content;}
    }
}

$media is a var/placeholder for other Sass vars, in case of this mixin $break-tablet is the var you want to change.

So just put

$break-tablet: 360px;

somewhere in the SCSS file you're including the mixin to (doesn't need to be above inclusion) and you'll be fine.

Another question is, why you'd like to include a breakpoint of 360px? There's no common tablet using 360px width. It's foremost (older) smartphones. But you'd be excluding iPhones with 360px.

respond-to(tablet, desktop) is a built-in compass mixin. **How do I extend the compass mixin?** I would rather not create another mixin. — scottgemmell, Apr 05 '14 at 21:05
There's also no difference/nothing that could seriously harm your project by using your own mixin instead of the predefined(?) Compass responsive mixin. 1. What built-in Compass mixin http://compass-style.org/index/mixins/ are you refering to? 2. What `respond-to` rulesets besides `tablet` are you currently using in your SCSS file? — Volker E., Apr 06 '14 at 06:10

How do I change compass break points? when using respond-to mixin

1 Answers1