Zurb Foundation _global.scss meta styles for js?

问题

I was working on a Foundation 5 project that turned out to have an outdated _global.scss component. I was trying to get range sliders working, but they were mysteriously not. Turns out, I was missing the following 2 lines of CSS:

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

Can someone explain these lines to me? The Docs say this:

// 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.

回答1:

Some of Foundation's JavaScript needs to know about the different media query ranges definitions.

It is particularly true for some components such as interchange that is literally about things behaving differently depending on the viewport.

But foundation also lets you customize what the different breakpoints are.

In order to make have the value set in one single place, foundation uses this little trick of adding the media query breakpoint definition of a meta with a matching class name.

Here's how it works, for the breakpoint $small-up (it's the same for the others):

Let's say you keep the default value: $small-up: only screen.

The JS in foundation will do the following:

create a <meta> tag with the class .foundation-mq-small
read the value of the CSS property font-family
now it knows what is the definition of the $small-up media query
it's now accessible to the different foundation js components that may need it

You can see how it's done in foundation.js

The reason why it's using font-family is that it's one of the rare CSS properties that doesn't have a defined set of values. If they had used the property text-align, the browser would have ignored the invalid value and the JS would have gotten something like left in return.

来源：https://stackoverflow.com/questions/23793667/zurb-foundation-global-scss-meta-styles-for-js

标签

html

css

zurb-foundation