Also define the standard property 'grid-column' for compatibility

435 views Asked by At

I'm new to SASS and I'm trying to create a simple for loop in SASS for create grid classes. I have five boxes in my grid. Basically this is what I'm trying to do for each box:

.box1 {
    grid-area: box1;
    width: 100%;

    img {
        width: 100%;
    }
}

And this is my SASS code:

$gridBox: 5;

    @for $i from 1 through $gridBox {
        .box#{$i} {
            grid-area: box + $i;
            width: 100%;

            img {
                width: 100%;
            }
        }
    }

I checked main.css file and SASS automatically adds -ms-grid-row and -ms-grid-column to box classes. Because there is no grid-row and grid-column VS Code gives an error and wants me to also define standard properties but I'dont want to add them. How can I solve this problem?

0

There are 0 answers