Sass breakpoint doesn't work

1.7k Views Asked by At

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;
}
1

There are 1 best solutions below

2
cimmanon On BEST ANSWER

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;
  }
}