How to add custom scss variable that depends on quasar variable?

[iliubinskii]

Is your feature request related to a problem? Please describe.

I want to add the following custom variable:

@use "sass:map";
$page-section-margin : map.get($space-lg, "y") !default;

However, when I add it to quasar.variables.scss file I get "SassError: Undefined variable" for $space-lg inside quasar.variables.scss. So, I can't use quasar variable $space-lg inside quasar.variables.scss.

If I add it to app.scss I get "SassError: Undefined variable" for $page-section-margin inside Vue template. So, my variable defined in app.scss is not available in Vue templates.

Describe the solution you'd like

Add standard file for custom variables, e.g. custom.variables.scss in such a way that:

1. All quasar variables are available inside custom.variables.scss.
2. Variables defined inside custom.variables.scss are available in Vue components.

Describe alternatives you've considered

N/A

Additional context

N/A

[pdanpdan]

quasar.variables.scss is loaded before the variables in quasar so that you can change their default value. You should be able to use all variables and add new variables inside app.scss. Can you show how are you trying to use them?

[iliubinskii]

Hi,

I have added reproduction repository: https://github.com/ilyub/repro-custom-scss

It has 3 commits:

1. In 1st commit I add $my-var variable to quasar.variables.scss and use it in index page.
2. In 2nd commit I am trying to use $space-xl, but it causes error because $space-xl is unavailable.
3. In 3rd commit I am trying to move $my-var to app.scss but it becomes unavailable inside index page causing error.

So, my suggestion: Add another standard scss file "custom.variables.scss" in such a way that:

1. I can define $my-var inside custom.variables.scss
2. $space-xl is already defined in custom.variables.scss, so that I can write $my-var : map.get($space-xl, "y") !default;
3. $my-var variable defined in custom.variables.scss is available inside component

Probably this can be achieved by prepending custom.variables.scss inside webpack. But (1) I did not find documentation on how to do it with quasar and (2) it would be much better to have standard solution for this.

[hugetiny]

same problem +1

[manimovassagh]

I have same problem

[igolka97]

If I understand correctly, let me show how i achieved what you want:

I wanted to substitute $elevation-* vars, while using native $shadow-color from default quasar vars. So:

// quasar.variables.scss
@use "quasar/src/css/variables.sass" as q;

$primary   : #1976D2;
// ...
$warning   : #F2C037;

$elevation-umbra      : rgba(q.$shadow-color, .075);
$elevation-penumbra   : rgba(q.$shadow-color, .05);
$elevation-ambient    : rgba(q.$shadow-color, .025);

Anyway, if you want to define some custom vars with quasar default vars, you need this:

@use "quasar/src/css/variables.sass" as q;

note that i'm using @use instead deprecated @import