Sass 断点不起作用

Question

我检查了所有的可能性，没有发现任何问题。

config.rb

有以下行：require 'breakpoint'

style.scss

还有@import "breakpoint";

我正在尝试这样：

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

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

我在编译的 css 文件中没有看到任何效果，只有新属性覆盖了以前的属性。我正在使用 Sass 3.4.13 (Selective Steve) 和 Compass 1.0.1 (Polaris).

编辑：示例编译结果：

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

编译：

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

Answer 1

那是因为你没有正确使用mixin。断点 mixin 是一个 @content aware mixin，用于该 mixin 的样式需要放在花括号内：

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

输出：

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

Sass breakpoint doesn't work