0

I want to add borders determined by @media breakpoints. My code is as follows:

@media(max-width:767px) { $height: auto; $grid: 1; }
@media(min-width: 768px) and (max-width:991px) { $height: 370px; $grid: 2; }
@media(min-width: 992px) and (max-width:1199px) { $height: 240px; $grid: 4; }
@media(min-width: 1200px) { $height: 195px; $grid: 6; }

article:nth-child(-n+#{$grid}) {
    border-top: 1px solid #353535;
}

SASS returns error Undefined variable: "$grid". But I don't know why. What can I do?

Tomek Buszewski
  • 7,659
  • 14
  • 67
  • 112

1 Answers1

1

You are defining $grid within the scope of the media query and then trying to use it outside of that scope.

As far the SASS compiler is concerned the media queries are redundant at that point so $grid doesn't get recognised.

If however the article declaration was made inside one of the media queries it would work, likewise if you define $grid outside of the media queries it would work.

Stew Dellow
  • 267
  • 1
  • 6