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