时间戳

首页 > 解决方案 > 为什么在 Vue 组件的样式中添加 lang=less 会改变现有行为？

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

问题描述

我有一个 Vue 组件，并想确定它的 CSS 范围。在发现正确的方法（通过scoped属性）之前，我有一个计划用来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 进行不同的处理？

标签： cssvue.jslessvue-component

解决方案

您应该使用efunction for grid-columnvalue 来防止 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";
}

有关更多信息，您可以在 less 中查看转义主题。

推荐阅读