Sass breakpoint doesn't work

Question

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

`rem` isn't a valid unit for media queries, so they won't work. — Snugug, May 05 '15 at 12:35
@Snugug I've tried rem in normal media queries and it work's fine. — Garrett, May 05 '15 at 13:00
@cimmanon It's not duplicate. In my case breakpoint doesn't work, no matter what I provide - 1000 [unit] or without unit. I don't have any compilation errors also. — Garrett, May 05 '15 at 13:07

score 1 · Accepted Answer · answered May 05 '15 at 13:27

1

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

answered May 05 '15 at 13:27

cimmanon

67,211
17
165
171

Oh god, this example http://breakpoint-sass.com/ isn't proper for blind peoples! :) I didn't noticed those curly braces... Thank you. – Garrett May 05 '15 at 13:36
Yeah, the contrast is really bad on that syntax highlighting, you can barely see the curly braces. – cimmanon May 05 '15 at 15:02

Sass breakpoint doesn't work

1 Answers1