Zurb基金会js的_global.scss元样式？

Question

我在做一个Foundation5项目，结果发现它有一个过时的_global.scss组件。我试图让量程滑块工作，但他们却神秘地没有。结果，我错过了以下两行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

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

对于某些组件来说，尤其如此，比如交换，这实际上是关于事情的不同行为，这取决于视图端口。

但是基础也允许您自定义不同的断点是什么。

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

下面是它的工作原理，对于断点$small-up (其他的也是一样的)：

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

基金会中的联合声明将做以下工作：

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

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

之所以使用font-family，是因为它是一种罕见的没有定义值集的CSS属性。如果他们使用了属性text-align，浏览器就会忽略无效的值，JS也会得到类似于left的东西作为回报。