1

我尝试使用断点替换Zen 7.5.4 Drupal 基本主题的子主题的_responsive.scss （参见第 155 行）中的媒体查询：

// @media all and (min-width: 960px)
@include breakpoint($desktop)
{
  $zen-column-count: 5;
  …

在此之前，我安装了 config.rb 中所需的断点，在 _init.scss 中包含并定义了我的断点。

// Breakpoints
$breakpoint-no-query-fallbacks: true;

$small: 480px, 'no-query' '.lt-ie9';
$desktop: 960px, 'no-query' '.lt-ie9';

一个更简单的任务可以完美地工作（因此系统可以正常工作）但是提到的代码会产生以下错误：

error styles.scss (Line 118 of _breakpoint.scss: Base-level rules cannot contain the parent-selector-referencing character '&'.)

我试图在zen-grids的代码中找到'&'，但没有找到。我错了什么？

4

2 回答 2

1

正如 Thamas 所说，Breakpoint 的无查询回退意味着在选择器中使用；回退在选择器字符串前面加上一个空格，因此它们不能在选择器之外使用。

这是正在发生的事情：

带断点的 Sass：

$small: 480px, 'no-query' '.lt-ie9';
.foo {
  content: 'bar';
  @include breakpoint($small) {
    content: 'baz';
  }
}

普通萨斯：

.foo {
  content: 'bar';
  @media (min-width: 480px) {
    content: 'baz';
  }
  .lt-ie9 & {
    content: 'baz';
  }
}

请务必注意，Breakpoint 不会创建单独的全局上下文，因此您提供的设置$zen-column-count在 Breakpoint 内的代码不会将其限制为该断点。

用于处理媒体查询的推荐工作流程以及为 Breakpoint 构建的工作流程不是将一种类型的所有媒体查询组合在一起，而是将媒体查询在线使用以根据需要调整单个元素. 这与您不使用基于设备的媒体查询器，而是使用基于内容的媒体查询的建议密切相关；即选择媒体查询，因为当前组件看起来不再好，需要调整。

于 2013-11-26T15:39:48.543 回答
0

“我怎么了？”

我没有读。错误消息说问题出在_breakpoint.scss断点而不是 Zen 上。

它不是错误，而是“通过设计”。Breakpoint 是一个 mixin，被设计为包含在选择器中，因此在文件@include的根级别是没有意义的.scss。

值得一提的是，Sass 启用了根级别@include，但它仅限于在没有任何属性或父引用的情况下使用（breakpoint有这些，这就是问题所在） - 请参阅：http ://sass-lang.com/documentation/file.SASS_REFERENCE.html #include_a_mixin

于 2013-11-26T14:49:22.017 回答