Sass :: SyntaxError:未定义的变量。但变量是定义的

时间:2016-08-08 11:27:07

标签: ruby-on-rails sass

我因为一个愚蠢的scss错误而把头撞在墙上:

Sass::SyntaxError: Undefined variable: "$darker-grey"
app/assets/stylesheets/mobile/general.scss:36
app/assets/stylesheets/mobile/main.scss:6

在我的主scss文件中,我有:

@import "compass";
@import "compass/reset";
@import "bourbon";
@import "mobile/variables.scss";
@import "mobile/mixins.scss";
@import "mobile/general.scss";
@import "mobile/general-profile.scss";
@import "mobile/buttons.scss";
@import "mobile/form.scss";

在使用它们的每个其他文件之前导入变量。

这是我的变量文件。

/****************************************************
*
* Varibles
*
****************************************************/
$imgs: "mobile/";

/****************************************************
*  Colors
****************************************************/

$background-color : #FFFFFF;
$foreground-color : #1F1F1F;

$light-gray  : #F7F7F7;
$medium-gray : #D6D6D6;
$gray        : #A3A3A3;
$gray-alt    : #3E3E3E;
$dark-gray   : #2B2B2B;
$darker-gray : #1F1F1F;
$sponsored-gray : #E7E7E7;
$green      : #82AA1E;
$dark-green : #0F6B18;
$orange     : #E25000;

/****************************************************
*  Fonts
****************************************************/
$font-regular : "proxima-nova", arial, sans-serif;
$font-condensed : "proxima-nova-extra-condensed", arial, sans-serif;

/****************************************************
*  Fonts size
****************************************************/
$font-smaller : 0.5em;
$font-small   : 0.75em;
$font-base    : 1em;
$font-big     : 1.8em;
$font-bigger  : 2.6em;

$font-footer-copy : 12px;
$font-title-page  : 32px;

/****************************************************
*  Z-index
****************************************************/
$z-i-base           : 1;
$z-i-banner-comment : $z-i-base + 1;
$z-i-header-menu    : $z-i-banner-comment + 1;
$z-i-icon-hamburger : $z-i-header-menu + 1;

$z-i-modal : 100;
$z-i-btn-close : $z-i-modal + 1;
$z-i-modal-banner-comment : $z-i-btn-close + 1;

此规则返回错误:

Extracted source (around line #36):

  font-size   : $font-small;
  font-weight : 300;
  color       : $darker-grey;
  @include display-flex();
  @include flex-flow(column);

为什么在同一个文件中声明的$font-small没问题,但是$darker-grey没有???

1 个答案:

答案 0 :(得分:1)

你有一个错误:$darker-grey - > $darker-gray