如何停止 sass/compass 评估“不打印"在媒体查询中为“假" [英] How to stop sass/compass evaluating "not print" in media query as "false"

问题描述

如您所见，sass/compass 解析不打印并将其转换为 false - 破坏了媒体查询.

As you can see, sass/compass parses not print and turns it into false - breaking the media query.

$ cat test.scss
@media (not print) and (min-width: 600px) {
  color: #000;
}
$ sass test.scss
@media (false) and (min-width: 600px) {
  color: #000;
}

我试过使用 unquote 但它也不想合作

I've tried using unquote but it doesn't want to cooperate either

推荐答案

你不能.

当 Sass 遇到括号时，它会尝试对内容求值.not 关键字用于否定，因此当它看到 not print 时，其计算结果为 false.

When Sass encounters parentheses, it will attempt to evaluate the contents. The not keyword is used for negation, so when it sees not print, that evaluates to false.

因此，您尝试使用字符串 'not'.如果它在媒体查询之外的任何地方，它就会起作用.

So, you try to use the string 'not'. If it was anywhere other than in a media query, it would work.

.foo { color: (#{'not'} #000); }

评估为

.foo {
  color: not #000;
}

媒体查询在 Sass 中被特殊处理，并且必须遵守媒体查询的一般格式.

Media queries are treated special in Sass and must adhere to the general format of media queries.

即使您可以生成所需的 CSS，它也是无效的.如果您阅读用作参考的 MDN 页面，它会指定以下内容:

Even if you could generate the desired CSS, it is invalid. If you read the MDN page you're using as reference, it specifies the following:

not 关键字不能用于否定单个特征查询，只能用于否定整个媒体查询

The not keyword cannot be used to negate an individual feature query, only an entire media query

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

所以不，无法指定您的样式将被最小视口宽度为 600 像素的设备使用.

So no, it is not possible to specify that your styles will be used by devices that have a minimum viewport width of 600px and are not print.

这篇关于如何停止 sass/compass 评估“不打印"在媒体查询中为“假"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！