Undefined variable $leading-desktop

[Ricardo Zea]

Hello.

I'm extremely n00b with Sass but I would love to incorporate Gutenberg in my projects. I even bought the Gutenberg sticker :)

Anyhow, I'm importing all the partials into may main SCSS file but when I compile I get this error:

Error: Undefined variable: "$leading-desktop".

I don't see in the README any information about how to configure this.

What am I doing wrong?

Thanks.

[Matej Latin]

Hey @ricardozea !

Thanks for supporting this project. $leading-desktop is calculated on the 11th line in the _gutenberg-typography.scss file.

$leading-desktop: round($base-desktop * $line-height-desktop);

If the $leading-desktop doesn't get define then it must be something wrong with either $base-desktop or $line-height-desktop, so it doesn't get calculated...

Can you share that bit of your code with us perhaps?

[Ricardo Zea]

Hello @matejlatin

I have nothing special, all I'm doing is importing all Gutenberg's mixins in my main SCSS file:

@import
"gutenberg/gutenberg-config",
"gutenberg/gutenberg-mixins",
"gutenberg/gutenberg-reset",
"gutenberg/gutenberg-config",
"gutenberg/gutenberg-responsive",
"gutenberg/gutenberg-style",
"gutenberg/gutenberg-typography",
"mixins";

Koala (the app I used to compile) shoots me this error:

Error: Undefined variable: "$leading-desktop".
    on line 3 of Z:/.../www/scss/gutenberg/_gutenberg-responsive.scss

It points to the _gutenberg-responsive.scss file instead of the _gutenberg-typography.scss file you said.

Is there anything specific I need to define within my main SCSS file? TBH, the instructions aren't very clear as to how to proceed with the installation :/

On top of that, this is my first time using this project. Same thing happened to me when I was learning to use the Modular Scale project, I had to ask because instructions weren't very clear. So hopefully I will soon figure it out because this project is going to be the replacement of the Modular Scale I currently use for everything.

Thanks for your help.

[Matej Latin]

Hey @ricardozea
I think it's just the order by which you import those files. gutenberg-typography should come before the gutenberg-responsive. You're basically calling/setting the variable before it's set. Try switching the order.

[Ricardo Zea]

Yes, yes @matejlatin, you were right, I changed the order based on the README and it worked :)

As far as this issue is concerned, it's resolved. However, I have two more questions. Do you want me to open an issue for each or do you want me to open an issue for both?

Or how do you want to answer them? Adding them here feels "off-topic" :p

Thank you very much for your help.

BTW, I meant to say that my page looks SO nice with Gutenberg! :D

[Ricardo Zea]

Sorry, didn't mean to close this, at least yet :p

[Matej Latin]

Hey @ricardozea I'm glad that worked :) As you wish, put them together if they're related and in separate if not :)

Is there a way to see your new page?

[Ricardo Zea]

Ok, I created a new issue here #35 - I don't remember what the other idea was about, I'll post it as soon as I remember :) lol.

At this point my homepage (WIP) is only made out of cards with titles in them, there is very little copy, but you can clearly see Merriweather theme in place:

As soon as I got Gutenberg to work, I refreshed the page and I feel that the typography is so harmonious... I don't know, it's a weird feeling, lol.

[Matej Latin]

Awesome! I'm glad it worked out that well for you :)