SCSS: Getting compilation error when using grid: repeat(auto-fit, minmax(260px, 1fr));

Question

I have valid css grid rule

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px , 1fr));
}

however, the scss compiler brings the following error:

Compilation Error Error: minmax(300px, 1fr) is not an integer. ... >> grid-template-columns: repeat(auto-fit, minmax(300px , 1fr));

I can skip it using unquote() function, but I am curious why this happens. What am I doing wrong in SCSS?

Answer 1

i think the problem is your sass version, because me with the version "node-sass": "^ 7.0.1" works for me I just compiled it.

So if you want to keep your version of sass i make the code work I think it is an incompatibility either with the value in px or with the functions. For en px values you may need to write the sass code as follows (I use scss):

grid-template-columns: repeat (auto-fit, minmax ((# {300px}), 1fr));

If the incompatibility and because it does not recognize some of the function try to write the functions starting with a capital letter.

grid-template-columns: Repeat (Auto-fit, Minmax ((# {300px}), 1fr));