I am trying to incorporate borders based on specific @media breakpoints. Here is the code I have written:
@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;
}
When I try to compile this SASS code, I receive an error saying Undefined variable: "$grid". I'm unsure as to why this is happening. Any suggestions on how to resolve this issue?