Переменные SASS не работают в файле .s css

Question

У меня проблемы с переменными sass. Браузер сообщает мне, что я использую недопустимые значения свойств, и я вижу, что редактор кода не собирает переменные, которые я использую, потому что не окрашивает их.

Я удалил и переустановил sass и gulp-sass, но это не устранило проблему, и у меня нет идей. Я уверен, что это что-то действительно простое.

Основные факты
Я на windows 10
Я установил sass, используя npm install sass
Я установил gulp-sass с использованием npm install gulp-sass
Я успешно компилирую файл .s css в файл. css
Сейчас я пытаюсь создать переменные в .s css файл

Это мой .s css файл

$flx: flex;
$clm: column;
$mpage: 1 0 auto;
$space-between: sb;
$pg1: 100vh;

body {
    display: flx;
    min-height: 100vh;
    flex-direction: clm;
  }

  main {
    flex: mpage;
  }

  .item-wrap{
    justify-content: sb;

  }

Answer 1

Чтобы Sass мог читать ваши переменные, когда вы вызываете их, вы должны повесить перед ними символ $, как вы это делали при их объявлении.

Пример:

$flx: flex;
$clm: column;
$mpage: 1 0 auto;
$space-between: sb;
$pg1: 100vh;

body {
    display: $flx;
    min-height: 100vh;
    flex-direction: $clm;
  }

  main {
    flex: $mpage;
  }

  .item-wrap{
    justify-content: $sb;

  }