如何解决SCSS 在转换为 CSS-IE 前缀时破坏了我的网格
我遇到了行为不端的网格的问题。对于上下文，我有一个单页应用程序，我试图将其转换为大屏幕上的网格布局。我的 HTML 有一个包含整个页面的“主网格”div：
<body>
<div class="main-grid">
...
</div>
<script ... > </script>
</body>
在此媒体查询之前，我没有为此元素添加任何属性：
@include media-md {
.main-grid {
display:grid;
grid-template-columns: minmax(1em,1fr) repeat(3,minmax(10rem,30rem)) minmax(1em,fr);
gap: 2em;
}
我遇到的问题有两方面 第一：这个scss编译成这个：
.main-grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: minmax(1em,1fr) (minmax(10rem,30rem))[3] minmax(1em,fr);
grid-template-columns: minmax(1em,fr);
gap: 2em;
}
我从研究中了解到 IE 使用括号语法而不是重复，但 VSCode 似乎不理解这一点。它在 [3] 处引发错误，并导致 chrome 和 FF 也将我的常规网格选项灰显。
我之前删除了这些并输入了每一列，但 Chrome 和 FF 仍然无法识别此代码。有人知道这是怎么回事吗？以防万一我不够清楚：Here's a live shot of my devtools for reference on the wonky grid and grayed-out styling;
解决方法
如果您将鼠标悬停在浏览器开发工具中的黄色警告标志上，则会显示代码变灰的原因。
对我来说，这似乎是两个不同的问题：
(1) -ms-grid-columns 变灰完整，因为属性的 NAME = '-ms-grid-columns'（不是值）在该浏览器中未知，即在 FF 中是正确的，铬合金。 （括号 [3] 似乎不是原因）。
(2) grid-template-columns: minmax(1em,1fr) repeat(3,minmax(10rem,30rem)) minmax(1em,fr); 由于属性的 VALUE 错误而变灰。所以代码在浏览器中根本无法运行。
第二个问题的原因似乎是使用单位 fr 没有价值。尝试将其更改为 1fr 应该可以工作。
只是对单位 fr 的评论： 由于兼容性，我不太确定现在使用该单位是否是一个好主意。浏览器似乎不太支持该单元，canIuse.com 将其标记为实验性的...也许您想自己看看：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。