Error: Invalid null operation: "null times 2.36859" about sassy-gridlover

[hiulit]

Hey, thanks! I'm glad you find it useful :)

First of all, are you using Sass Dart? Because old Ruby Sass is now deprecated.

A part from that, I need more information. Could you paste your sgl-heading mixin?
For example:

h1 {
    @include sgl-heading(3, 0, 1, 2);
}

Also, if you are updating from an older version, check out the new documentation and the CHANGELOG because there have been many changes, some of them breaking old stuff.
Sassy-Gridlover is now at v6.0.4.

[josueq]

thanks for your answer.

I'm not using Sass Dart.

Here is the code when

@import 'vendors/sassy-gridlover/sassy-gridlover';
.
.
.

.articleTitle{
               @include sgl-heading(3, 0, 1, 2);
                text-decoration: none;
		font-weight: bold;
		display: inline-block;
}

I made the changes according to the indications that are in the new version guide.

[hiulit]

My first suggestion would be to update to Sass Dart, because that's the official Sass now. Ruby Sass is deprecated and Sassy-Gridlover is up to date to use Sass Dart.

Now, your code looks fine.
Are you using any other Sassy-Gridlover mixins? Apart from the one in the code above. Is this the only mixin that breaks?

[josueq]

I just updated to Sass Dart.
I changed the reference in the gulpfile as well and I installed gulp-dart-sass and changed according to instructions too.

the error shows:

the line is
@include sgl-heading(3, 0, 1, 2);

[hiulit]

I don't know why but it seems that you are lacking the $font-size variable, that's why it returns null

[hiulit]

Oh, are you using sgl-html()? Because you should.

Add this:

html {
    @include sgl-html;
}

At the top of you code, line in the example https://github.com/hiulit/Sassy-Gridlover#example-usage

[josueq]

thank u again for your instruction. I do not have this problem anymore. I had to add this line
@include sgl-html;
to the class where I use:
@include sgl-heading(3, 0, 1, 2);
and it works.
Duplicate code is generated, but at least, works. I didn't have that problem with the previous version. With this version, it is not possible to use the mixin from different separate files?

I 'm using the 7-1 pattern (https://github.com/HugoGiraudel/sass-boilerplate and I defined:
@include sgl-html;
in the base file, the variables in variables file and another calls to sgl-heading from components, layouts or pages files.

[hiulit]

I'm glad it's working! :)

You should add @include sgl-html; ONLY in html {}, for example in your reset.scss or the like.

Like this:

html {
    @include sgl-html;
}

Only use it one time. It sets the base font size for the project.

[hiulit]

Maybe it should be stated in the docs clearly that

html {
    @include sgl-html;
}

is mandatory.

[josueq]

unfortunately, when I remove it, doesn't work :(

[hiulit]

No, of course! You should not remove it! But you should only add it once:

html {
    @include sgl-html;
}

Wherever you have you reset styles or something similar, try to add it there.