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

score 1 · Accepted Answer

那是因为你错误地使用了 mixin。断点 mixin 是一个有@content意识的 mixin，用于该 mixin 的样式需要放在花括号内：

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

输出：

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

1 回答 1