如何获得 SASS 嵌套的嵌套媒体查询以使用媒体查询或运算符
How to get a SASS nested nested media query to work with the use of the media query or operator
我正在尝试让嵌套的 IE10+ 媒体查询在 SASS 中工作,但我不理解输出。我认为使用媒体查询 or
运算符 ,
会变得很奇怪。因此,此查询不适用于所有情况,因为唯一输出的是 or
的一侧。
请注意,这些最初是 mixin;我删除了 mixins 以使事情更容易调试
.element {
@media only screen and (min-width: 825px) and (max-width: 999px) {
font-size: 10.4vw;
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
font-size: 9.6vw;
}
}
}
编译为:
@media only screen and (min-width: 825px) and (max-width: 999px) {
.element {
font-size: 10.4vw;
}
}
@media only screen and (min-width: 825px) and (max-width: 999px) and (-ms-high-contrast: active) {
.element {
font-size: 9.6vw;
}
}
预期结果是:
@media all and (-ms-high-contrast: none) and (min-width: 825px) and (max-width: 999px), (-ms-high-contrast: active) and (min-width: 825px) and (max-width: 999px) {
.element {
font-size: 9.6vw;
}
}
这似乎是一个非常具体的案例,部分是 Sass 中的不当行为,部分是模棱两可的期望。
Sass 可以毫无问题地处理嵌套与逗号分隔的媒体查询...直到您开始在内部和外部查询上指定显示类型:
/* without `screen` */
.foo {
@media (min-width: 20em) {
color: yellow;
@media all and (max-width: 40em), (orientation: portrait) {
color: green;
}
}
}
/* without `only` */
.bar {
@media screen and (min-width: 20em) {
color: yellow;
@media all and (max-width: 40em), (orientation: portrait) {
color: green;
}
}
}
/* with `only screen` */
.buzz {
@media only screen and (min-width: 20em) {
color: red;
@media all and (max-width: 40em) {
color: blue;
}
}
}
输出:
/* without `screen` */
@media (min-width: 20em) {
.foo {
color: yellow;
}
}
@media all and (min-width: 20em) and (max-width: 40em), (min-width: 20em) and (orientation: portrait) {
.foo {
color: green;
}
}
/* without `only` */
@media screen and (min-width: 20em) {
.bar {
color: yellow;
}
}
@media screen and (min-width: 20em) and (orientation: portrait) {
.bar {
color: green;
}
}
/* with `only screen` */
@media only screen and (min-width: 20em) {
.buzz {
color: red;
}
}
在内部查询和外部查询都包含显示类型(全部、屏幕)的两种情况下,编译结果与写入的内容不正确匹配。这似乎是 Sass 试图编写类似于有效媒体查询的内容的情况(因为它知道 screen and all
无效)。
所以只指定一次显示类型。
.element {
@media (min-width: 825px) and (max-width: 999px) {
font-size: 10.4vw;
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
font-size: 9.6vw;
}
}
}
编译为:
@media (min-width: 825px) and (max-width: 999px) {
.element {
font-size: 10.4vw;
}
}
@media all and (min-width: 825px) and (max-width: 999px) and (-ms-high-contrast: none), (min-width: 825px) and (max-width: 999px) and (-ms-high-contrast: active) {
.element {
font-size: 9.6vw;
}
}
我正在尝试让嵌套的 IE10+ 媒体查询在 SASS 中工作,但我不理解输出。我认为使用媒体查询 or
运算符 ,
会变得很奇怪。因此,此查询不适用于所有情况,因为唯一输出的是 or
的一侧。
请注意,这些最初是 mixin;我删除了 mixins 以使事情更容易调试
.element {
@media only screen and (min-width: 825px) and (max-width: 999px) {
font-size: 10.4vw;
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
font-size: 9.6vw;
}
}
}
编译为:
@media only screen and (min-width: 825px) and (max-width: 999px) {
.element {
font-size: 10.4vw;
}
}
@media only screen and (min-width: 825px) and (max-width: 999px) and (-ms-high-contrast: active) {
.element {
font-size: 9.6vw;
}
}
预期结果是:
@media all and (-ms-high-contrast: none) and (min-width: 825px) and (max-width: 999px), (-ms-high-contrast: active) and (min-width: 825px) and (max-width: 999px) {
.element {
font-size: 9.6vw;
}
}
这似乎是一个非常具体的案例,部分是 Sass 中的不当行为,部分是模棱两可的期望。
Sass 可以毫无问题地处理嵌套与逗号分隔的媒体查询...直到您开始在内部和外部查询上指定显示类型:
/* without `screen` */
.foo {
@media (min-width: 20em) {
color: yellow;
@media all and (max-width: 40em), (orientation: portrait) {
color: green;
}
}
}
/* without `only` */
.bar {
@media screen and (min-width: 20em) {
color: yellow;
@media all and (max-width: 40em), (orientation: portrait) {
color: green;
}
}
}
/* with `only screen` */
.buzz {
@media only screen and (min-width: 20em) {
color: red;
@media all and (max-width: 40em) {
color: blue;
}
}
}
输出:
/* without `screen` */
@media (min-width: 20em) {
.foo {
color: yellow;
}
}
@media all and (min-width: 20em) and (max-width: 40em), (min-width: 20em) and (orientation: portrait) {
.foo {
color: green;
}
}
/* without `only` */
@media screen and (min-width: 20em) {
.bar {
color: yellow;
}
}
@media screen and (min-width: 20em) and (orientation: portrait) {
.bar {
color: green;
}
}
/* with `only screen` */
@media only screen and (min-width: 20em) {
.buzz {
color: red;
}
}
在内部查询和外部查询都包含显示类型(全部、屏幕)的两种情况下,编译结果与写入的内容不正确匹配。这似乎是 Sass 试图编写类似于有效媒体查询的内容的情况(因为它知道 screen and all
无效)。
所以只指定一次显示类型。
.element {
@media (min-width: 825px) and (max-width: 999px) {
font-size: 10.4vw;
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
font-size: 9.6vw;
}
}
}
编译为:
@media (min-width: 825px) and (max-width: 999px) {
.element {
font-size: 10.4vw;
}
}
@media all and (min-width: 825px) and (max-width: 999px) and (-ms-high-contrast: none), (min-width: 825px) and (max-width: 999px) and (-ms-high-contrast: active) {
.element {
font-size: 9.6vw;
}
}