Vue3 (3.2.x) — Vue variables in CSS (style section)

Use case

Recently I’ve stumbled upon a problem where I’ve implemented some simple CSS based tabs. The best in it was that it “was already there”, “was free” and “worked almost out of box”. Once I was done with base case (just 2 tabs), I’ve started adding some more of them, and… things didn’t quite worked as expected.

The problem was that the SCSS code had hard-coded variable $tab-count with which all the widths, heights etc. were calculated and clickable tabs were showing & hiding content.

I didn’t wanted to have hard-coded value but rather a dynamic one, based on how many tabs are passed via prop to the Tabs component.

In the end, what I write about didn’t solved my problem but got learned about the new functionality, and case in which it won’t work.

`v-bind` in styles section

Vue 3.2.x allows to use v-bind directly in the <style> section.

Here is the simple example:

That above is literally everything that there is to be done to make it works. This also works with SCSS (alongside with vars $varName: v-bind() ).

Issue: v-bind returns string

In most cases v-bind returning string is just fine. This will probably cover 90% of cases. But it didn’t covered mine, as I needed to do loop in SCSS like that:

• $tabCount: v-bind(tabsCount)
• @for $i from 1 through $tabCount

This causes unavoidable error, which in my use case makes it impossible to use v-bind in style section.