Exploring ways to scope the CSS of my Vue component, I initially considered using less to encapsulate my styles. However, after discovering the scoped attribute as the recommended method, I realized that my approach needed adjustment.
In my original setup, the CSS section looked like this:
<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>
Updating the first line to <style lang=less>, I expected no visible changes at first. I assumed less would be compatible enough with CSS that using it without specific features would leave the styles unchanged.
However, this was not the case, as my page layout became disturbed. DevTools revealed a discrepancy:
https://i.sstatic.net/6H8JE.png
It appeared that the display property was no longer recognized as grid, causing unexpected behavior with grid-column.
What exactly changed by adding lang=less to <style>? And why did the CSS behavior alter without any modifications to the code?