SASS 变量在 .scss 文件中不起作用答案

【问题标题】：SASS variables are not working in .scss fileSASS 变量在 .scss 文件中不起作用
【发布时间】：2020-05-07 00:47:18
【问题描述】：

我在处理 sass 变量时遇到了问题。浏览器告诉我我使用了无效的属性值，我可以看到代码编辑器没有拾取我正在使用的变量，因为它没有为它们着色。

我已经卸载并重新安装了 sass 和 gulp-sass，但这并没有解决问题，而且我没有想法。我敢肯定这很简单。

关键事实
我在 Windows 10
我使用 npm install sass 安装了 sass
我使用 npm install gulp-sass 安装了 gulp-sass
我成功地将 .scss 文件编译成 .css 文件
我目前正在尝试在 .scss 文件中创建变量

这是我的 .scss 文件

$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;

  }

【问题讨论】：

标签： sass gulp

【解决方案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;

  }

【讨论】：