Search code examples
cssvue.jssassvuetify.jsvuetifyjs3

Error while using Vuetify's sass variables

In my Vuetify3 application, I am using some library with a select dropdown, which I want to style exactly like Vuetify's select dropdown.

So, I inspected Vuetify's select box, copied its styles, and tried the box-shadow property like the one below which works fine-

box-shadow:
      0 5px 5px -3px rgba(0, 0, 0, 0.2),
      0 8px 10px 1px rgba(0, 0, 0, 0.14),
      0 3px 14px 2px rgba(0, 0, 0, 0.12);

Later, I found that inside the node_modules, under path /node_modules/vuetify/lib/styles/settings/_elevations.scss, the following code is written and here Vuetify has written its box-shadow styles.

@use '../tools/functions' as *;

$shadow-key-umbra-opacity: var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, 0.2)) !default;
$shadow-key-penumbra-opacity: var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.14)) !default;
$shadow-key-ambient-opacity: var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, 0.12)) !default;

$shadow-key-umbra: () !default;
$shadow-key-umbra: map-deep-merge(
  (
    0: (0px 0px 0px 0px $shadow-key-umbra-opacity),
    ...,
    8: (0px 5px 5px -3px $shadow-key-umbra-opacity),
    ...
  ),
  $shadow-key-umbra
);

$shadow-key-penumbra: () !default;
$shadow-key-penumbra: map-deep-merge(
  (
    0: (0px 0px 0px 0px $shadow-key-penumbra-opacity),
    ...,
    8: (0px 8px 10px 1px $shadow-key-penumbra-opacity),
    ...
  ),
  $shadow-key-penumbra
);

$shadow-key-ambient: () !default;  
$shadow-key-ambient: map-deep-merge(
  (
    0: (0px 0px 0px 0px $shadow-key-ambient-opacity),
    ...,
    8: (0px 3px 14px 2px $shadow-key-ambient-opacity),
    ...
  ),
  $shadow-key-ambient
);

So, I imported that Vuetify elevation styles file, and tried like this-

@use "vuetify/lib/styles/settings/_elevation" as *;

box-shadow: $shadow-key-umbra(8),
            $shadow-key-penumbra(8),
            $shadow-key-ambient(8);

But it throws the error of undefined variable, $shadow-key-umbra.

What am I doing wrong while accessing these variables? Any help would be great.

Solution

  • Oh, the file you posted is settings/_elevations, but you import tools/_elevation.

    tools/_elevation might work better for you, as it defines a mixin to build elevation:

    @use "vuetify/lib/styles/tools/_elevation" as VuetifyElevationTools;
@include VuetifyElevationTools.elevation(8);

    which is the same as doing it manually from settings/_elevations:

    @use "sass:map";
@use "vuetify/lib/styles/settings/_elevations" as VuetifyElevationSettings;
box-shadow: 
  map.get(VuetifyElevationSettings.$shadow-key-umbra, 8),
  map.get(VuetifyElevationSettings.$shadow-key-penumbra, 8),
  map.get(settings.$shadow-key-ambient, 8)
;