Search code examples
sassmedia-queriescompass-sassbreakpoint-sass

Sass breakpoint doesn't work


I've checked all possibilities, and haven't seen any issue.

config.rb

Have following line: require 'breakpoint'

style.scss

also @import "breakpoint";

I'm trying this way:

$medium: 96rem; // or even $medium: 51rem 96rem;

.any-class{
    @include breakpoint($medium);
    //change any property
}

I don't see any effect in compiled css file, only new properties which overrides previous ones. I'm using Sass 3.4.13 (Selective Steve) and Compass 1.0.1 (Polaris).

Edit: Sample compilation result:

//Sass
html{
    font-size: 62.5%;
}
body{
    @include breakpoint(100rem);
    background-color: #000;
}

compiled:

//Css
html {
  font-size: 62.5%;
}
body {
}
body {
  background-color: #000;
}

Solution

  • That's because you're using the mixin incorrectly. The breakpoint mixin is a @content aware mixin, the styles intended for that mixin need to be placed inside curly braces:

    body{
        @include breakpoint(100rem) {
          background-color: #000;
        }
    }
    

    Output:

    @media (min-width: 100rem) {
      body {
        background-color: #000;
      }
    }