html - Zurb Foundation _global.scss 元样式的 js？

Question

我正在从事一个 Foundation 5 元素，结果发现它有一个过时的 _global.scss 组件。我试图获得 range sliders工作，但他们神秘地没有。原来，我遗漏了以下 2 行 CSS:

meta.foundation-data-attribute-namespace {
  font-family: false;
}

谁能给我解释一下这些台词？文档是这样说的:

// Used to provide media query values for javascript components.
// Forward slash placed around everything to convince PhantomJS to read the value.

meta.foundation-mq-small {
  font-family: "/" + unquote($small-up) + "/";
  width: lower-bound($small-range);
}

meta.foundation-mq-medium {
  font-family: "/" + unquote($medium-up) + "/";
  width: lower-bound($medium-range);
}

meta.foundation-mq-large {
  font-family: "/" + unquote($large-up) + "/";
  width: lower-bound($large-range);
}

meta.foundation-mq-xlarge {
  font-family: "/" + unquote($xlarge-up) + "/";
  width: lower-bound($xlarge-range);
}

meta.foundation-mq-xxlarge {
  font-family: "/" + unquote($xxlarge-up) + "/";
  width: lower-bound($xxlarge-range);
}

meta.foundation-data-attribute-namespace {
  font-family: #{$namespace};
}

谢谢。

Answer 1

一些 Foundation 的 JavaScript 需要了解不同的媒体查询范围定义。

对于某些组件尤其如此，例如交换字面意思是根据视口(viewport)表现不同的事物。

但基金会也lets you customize不同的断点是什么。

为了在一个地方设置值，基金会使用了这个小技巧来添加具有匹配类名的元的媒体查询断点定义。

对于断点 $small-up，它是这样工作的(其他都一样):

假设您保留默认值:$small-up: only screen .

foundation 中的 JS 会做以下事情:

1. 创建一个 <meta>标记类 .foundation-mq-small
2. 读取 CSS 属性的值 font-family
3. 现在它知道 $small-up 的定义是什么了。媒体查询
4. 它现在可供可能需要它的不同基础 js 组件访问

您可以在 foundation.js 中看到它是如何完成的

它使用 font-family 的原因是它是没有一组定义值的罕见 CSS 属性之一。如果他们使用了属性(property) text-align , 浏览器会忽略无效值并且 JS 会得到类似 left 的内容作为返回。