时间戳

首页 > 解决方案 > SASS 变量在 .scss 文件中不起作用

sass - SASS 变量在 .scss 文件中不起作用

问题描述

我在使用 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;

  }

标签： sassgulp

解决方案

为了让 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;

  }

推荐阅读