Как управлять файлом CSS для поддержки сетки CSS и откат

Question

У меня есть некоторые проблемы для обработки файла CSS. у меня есть main-style.scss, который выглядит так:

$main-brown: #a1887f;
$contact-border: 10px solid $main-brown;
$box-background: linear-gradient(-135deg, #e0e0e0, #fafafa);
$box-border: 15px solid $main-brown;
$box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
$border-radius: 5px;
$font-family: 'Indie Flower', cursive;


*{
  box-sizing: border-box;
}

html, body {
    min-height: 100vh;
    font-family: $font-family;
    color: $main-brown;
    font-size: 100%;
}

.grid-item{
  margin: 5px 5px;
  border-radius:$border-radius;
  box-shadow: $box-shadow;
  background: $box-background;
  border: $box-border;
  opacity: 0.95
}

.btn{
  background: $box-background;
  border: $box-border;
  text-transform: uppercase;
  padding:10px 10px;
  font-size:30px;
  font-weight: 700;
  box-shadow: $box-shadow;
  border-radius:$border-radius;
}

Нет проблем с компиляцией, но у меня также есть файл scss с именем grid-style.scss, который начинается так:

@import 'main-style';


$grid-gap: 10px 15px;
@mixin display-grid {
  display: -ms-grid;
  display: grid;
}
@mixin bg-image{
  background-size:cover;
  background-repeat:no-repeat;
}
@mixin grid-template($row,$col){
  grid: repeat($row, 1fr) / repeat($col,1fr);
}

@supports (display: grid){

....
}

он содержит все правила для сетки CSS (я не уверен, что это правильный путь), и, наконец, я собираюсь создать другой файл для резервной сетки CSS с именем no-grid.scss. Но когда я пытаюсь скомпилировать grid-stle.scss, я получаю эту ошибку:

Error: Invalid CSS after "...nclude bg-image": expected "}", was "background-posi..."
        on line 8