Sass断点不起作用答案

【问题标题】：Sass breakpoint doesn't workSass断点不起作用
【发布时间】：2015-05-05 21:27:39
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

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

输出：

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

【讨论】：