SCSS use global function return as function parameter (Nuxt project)

Question

In a Nuxt app, I've a global _functions.scss file included via @nuxtjs/style-resources.

_functions.css

@function colors-medium-dark() {
  @return #{var(--colors-neutral-medium-dark, #dbe3f2)};
}

CTA.vue

Inside my component, I would like to use the return value of the above function as a parameter to the darken function. I've tried the following options

.icon {
  stroke: darken($color: colors-medium-dark(), $amount: 5%);
}

.icon {
  stroke: darken($color: call(colors-medium-dark), $amount: 5%);
}

.icon {
  stroke: darken($color: --colors-neutral-medium-dark, $amount: 5%);
}

However, I get this error.

Output

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                                                                                                                                                                                                                     friendly-errors 13:05:42
SassError: argument `$color` of `darken($color, $amount)` must be a color
        on line 331 of components/ui/CTA.vue, in function `darken`
        from line 331 of components/ui/CTA.vue
>>       stroke: darken($color: call(colors-medium-dark), $amount: 5%);

   --------------^

My function is accessible because I can use it normally if I don't wrap it into darken. What could be causing this error?

Not explicitely but I should have access to it via https://www.npmjs.com/package/@nuxtjs/style-resources — Théo Lavaux, Sep 21 '21 at 11:22
@ThéoLavaux `colors-medium-dark` returning variable declaration, but whereas `darken` method expects color value. — Sameer, Sep 21 '21 at 11:28
https://stackoverflow.com/questions/55823860/using-css-variables-in-sass-functions-node-sass — Théo Lavaux, Sep 21 '21 at 11:29
Does this one help? https://stackoverflow.com/q/69226599/8816585 — kissu, Sep 21 '21 at 11:46

SCSS use global function return as function parameter (Nuxt project)

0 Answers0