How can I access Quasar CSS variables in a Vue.js script?

SASS variables (like those in your quasar.variables.scss file) are compiled at build time into static CSS and are not automatically exposed to your JavaScript at runtime. In other words, there’s no built-in method such as $q.getColour('company-accent') that would retrieve these values.

To use these color values in your JavaScript code you have a couple of options:

1. Expose SASS Variables as CSS Custom Properties

   Update your SASS to also output CSS custom properties. For example, in your main style file you can add:

   SCSSCopied
   :root {
     --company-base: #3c3c3b;
     --company-accent: #89c3ce;
     --primary: #1976d2;
     --secondary: #26a69a;
     --accent: #9c27b0;
   }

   This way, you can access them from JavaScript like so:

   JAVASCRIPTCopied
   const accentColor = getComputedStyle(document.documentElement)
     .getPropertyValue('--company-accent').trim();
   
   console.log(accentColor); // "#89c3ce"

2. Maintain a Parallel JavaScript Object

   If you prefer to keep everything in one place, you could manually mirror your SASS variables in a JavaScript object:

   JAVASCRIPTCopied
   const colours = {
     'company-base': '#3c3c3b',
     'company-accent': '#89c3ce',
     primary: '#1976d2',
     secondary: '#26a69a',
     accent: '#9c27b0'
   };
   
   const accentColor = colours['company-accent'];
   console.log(accentColor);

Both methods involve some manual work. The first option (using CSS custom properties) might be preferable because it keeps your colors in sync between CSS and JS—provided you update them in one place. However, that approach requires you to update your SASS to output those variables as CSS custom properties.

In summary, there isn’t a built-in Quasar function to fetch SASS variables directly from your script tag. You’ll need to adopt one of the strategies above.