css - 为什么在 Vue 组件的样式中添加 lang=less 会改变现有行为？

Question

我有一个 Vue 组件，想确定其 CSS 的范围。在发现正确的方法(通过 scoped attribute )之前，我计划使用 less为了封装我的 CSS 条目。

我有一个按预期工作的初始部分:

<style>
    #weather {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: auto auto auto;
        text-align: center;
        grid-column-gap: 5px;
    }

    .hour {
        font-family: 'Open Sans', sans-serif;
        font-size: 20px;
        font-weight: bold;
        justify-self: start;
        padding: 0 5px 0 5px;
        color: white !important;
    }
    .date {
        font-family: 'Open Sans', sans-serif;
        font-size: 30px;
    }
    .today {
        grid-column: 1 / 5;
        font-weight: bold;
    }
    .tomorrow {
        grid-column: 5 / 9;
    }
</style>

在将第一行更改为 <style lang=less> 之后，我预计还没有任何变化。我认为 less 与 CSS 向后兼容，如果我不使用任何特定于 less 的内容，我会以相同的 CSS 结尾。

事实并非如此，我的页面受到了干扰。 DevTools 显示

这表明 display不是 grid不再，因此 grid-column没有意义。

通过添加 lang=less 改变了什么至 <style> ? 具体来说:为什么在 CSS 代码尚未更改的情况下对 CSS 进行了不同的处理？

Answer 1

您应该对grid-column 值使用e 函数以防止less 将1/5 编译为0.2.

 .today {
        grid-column: e("1 / 5");
        font-weight: bold;
    }
    .tomorrow {
        grid-column: e("5 / 9");
    }

或者你可以简单地这样做:

.today {
    grid-column: ~"1 / 5";
    font-weight: bold;
}
.tomorrow {
    grid-column: ~"5 / 9";
}

更多信息可以查看 Escaping 更少的主题。