为什么在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

对于e的值，应使用grid-column函数，以防止将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 主题。