Search code examples
csssassyarnpkgroots-sage

SCSS Undefined variable: "$general-grey" but the variable is actually defined and different

I'm pretty new to this and I was tasked to update the Roots Sage Theme we use for our website to the latest version. Now, the conversion process isn't hard itself, however, when importing the header into the new theme folder and compiling with yarn run build I get this error: 

 ERROR  Failed to compile with 2 errors                                                                                                                                                                                                            12:29:21

error  in ./resources/assets/styles/main.scss

Module build failed: ModuleBuildError: Module build failed:
      color: $general_grey;
            ^
      Undefined variable: "$general-grey".
      in /home/html/devel/website-folder/wp-content/themes/website-theme/resources/assets/styles/layouts/_header.scss (line 33, column 14)

As you can see, it says there is an undefined variable at line 33, column 14 called $general-grey. However, that is incorrect, as the variable is defined in a _variables.scss file and imported through @import "common/variables"; in the main.scss file.

These are the lines where the color variables are defined in _variables.scss:

$theme-colors: (
  primary: #525ddc,
  brand_primary: #00add3,
  brand_darken: #0083a0,
  general_grey: #3d3d3d,
  overlay_text: #fff,
  std_black: #000,
  breadcrumb: #bababa,
  arancione: #f7941d,
  arancione_hover: #ab6614,
  verde: #90dd00,
  azzurro: #50c9e2,
  color-donne: #da6b93,
  grey_strong: #abbdc9
);

And this is the _header.scss file where I try to use the general_grey variable:

.green_number {
      font-family: $font-family-sans-serif;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      color: $general_grey;
      margin: 0;

      a {
        color: $general_grey;
      }

      .fa-phone,
      .green {
        color: $verde;
      }
    }

In both _variables.scss and _header.scss it's called $general_grey with an underscore, while the ERROR says the undefined variable in line 33, column 14 is $general-grey with a dash.

Probably due to my inexperience, but I can't really get through this. What could possibly cause this error?

Thank you in advance for the tips! :)

Solution

  • $theme-colors is an Advanced Variable Functions. So to access to general_grey variable you will have to use the following:

    color: map.get($theme-colors, "general_grey");