时间戳

首页 > 解决方案 > 转换为 CSS-IE 前缀时，SCSS 打破了我的网格

html - 转换为 CSS-IE 前缀时，SCSS 打破了我的网格

问题描述

我遇到了行为不端的网格问题。对于上下文，我有一个单页应用程序，我正试图将其转换为大屏幕上的网格布局。我的 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, 1fr) repeat(3, minmax(10rem, 30rem)) minmax(1em, fr);
gap: 2em;
  }

我从研究中了解到 IE 使用括号中的语法而不是重复，但 VSCode 似乎并不理解这一点。它在[3]处引发错误，并导致 chrome 和 FF 也使我的常规网格选项变灰。

我之前删除了这些并输入了每一列，但 Chrome 和 FF 仍然无法识别此代码。有谁知道这是怎么回事？以防万一我不够清楚：这是我的 devtools 的实时照片，以供在不稳定的网格和灰色样式上参考；

标签： htmlcsssasscss-gridcompiler-warnings

解决方案

如果您将黄色警告标志悬停在浏览器开发工具中，则会显示代码变灰的原因。

在我看来，这似乎是两个不同的问题：

(1)-ms-grid-columns完全灰显，因为该属性的 NAME = '-ms-grid-columns' （不是值）在正确的浏览器（即 FF、Chrome 中）中是未知的。（括号[3]似乎不是原因）。

(2)grid-template-columns: minmax(1em, 1fr) repeat(3, minmax(10rem, 30rem)) minmax(1em, fr);属性的VALUE 错误，显示为灰色。所以代码在浏览器中根本不起作用。

第二个问题的原因似乎是使用fr没有价值的单位。尝试改变它，即1fr应该工作。

只是对单元的评论fr：由于兼容性，我不太确定现在使用该单元是否是一个好主意。浏览器似乎不支持该单元，并将canIuse.com其标记为实验性的......也许你想自己看看：

https://caniuse.com/?search=CSS%20API%3A%20fr

推荐阅读