Zurb Foundation _global.scss js 元样式？

我当时正在开发一个 Foundation 5 项目，结果发现该项目有一个过时的 _global.scss 组件。我试图得到范围滑块 http://foundation.zurb.com/docs/components/range_slider.html工作，但他们却神秘地没有工作。事实证明，我缺少以下两行 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};
}

Thanks.

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

对于某些组件尤其如此，例如交换，实际上是根据视口的不同而表现不同的事物。

但基础也让您定制 http://foundation.zurb.com/docs/media-queries.html#customize-with-sass不同的断点是什么。

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

断点的工作原理如下$small-up（其他的也一样）：

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

Foundation中的JS会做以下事情：

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

你可以看到它是如何完成的基础.js https://github.com/zurb/foundation/blob/c10052e7ab667aaf8085f830e0e91e490097474b/js/foundation/foundation.js#L281-L287

使用它的原因font-family它是罕见的没有一组已定义值的 CSS 属性之一。如果他们使用了该房产text-align，浏览器会忽略无效值，JS 会得到类似的结果left作为回报。