耙子流产了！ Sass :: SyntaxError：未定义的变量：＆＃34; $ c_blue＆＃34;

时间：2014-06-30 23:02:14

标签： css ruby-on-rails-4 sass asset-pipeline spree

我正在构建一个狂欢商店，一切都在开发中，但是当我尝试使用git push heroku master推送到生产时，我收到以下错误：

       rake aborted!
       Sass::SyntaxError: Undefined variable: "$c_blue".
       (in /tmp/build_1a624a4f-adf9-4627-a2ce-22692ef03d87/app/assets/stylesheets/spree/fancy/shared
/_layout.scss:2)

我正在使用名为spree_fancy的自定义主题：https://github.com/spree/spree_fancy

这是我的variable.css.scss文件：

/*--------------------------------------*/
/* Colors
/*--------------------------------------*/
$c_green:       #8dba53 !default;  /* Spree green    */
$c_red:         #e45353 !default;  /* Error red      */
$c_blue:        #50A2F3 !default;
$c_orange:      #ff9600 !default;

$layout_background_color:   #FFFFFF !default;
$title_text_color:          #404042 !default;
$body_text_color:           #919191 !default;
$link_text_color:           #61a1f0 !default;

$product_background_color:  #FFFFFF !default;
$product_title_text_color:  #404042 !default;
$product_body_text_color:   #404042 !default;
$product_link_text_color:   #BBBBBB !default;

/* -------------------------------------------- */
/* Load "Open Sans" font from Google Fonts
/* -------------------------------------------- */
@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600);

/*--------------------------------------*/
/* Font families
/*--------------------------------------*/
$ff_base:       'Open Sans', sans-serif !default;

/*--------------------------------------
  | Font sizes
  |--------------------------------------
  |- Navigation                         
  |                                    */
      $header_navigation_font_size:           16px !default;
      $horizontal_navigation_font_size:       16px !default;
      $main_navigation_header_font_size:      16px !default;
      $main_navigation_font_size:             14px !default;
/*|------------------------------------
  |- Product Listing                         
  |                                  */
      $product_list_name_font_size:           14px !default;
      $product_list_price_font_size:          16px !default;
      $product_list_header_font_size:         20px !default;
      $product_list_search_font_size:         16px !default;
/*|------------------------------------
  |- Product Details
  |                                  */
      $product_detail_name_font_size:         24px !default;
      $product_detail_description_font_size:  16px !default;
      $product_detail_price_font_size:        20px !default;
      $product_detail_title_font_size:        16px !default;
/*|------------------------------------
  |- Basic
  |                                  */
      $heading_font_size:                     24px !default;
      $sub_heading_font_size:                 16px !default;
      $button_font_size:                      12px !default;
      $input_box_font_size:                   13px !default;
      $base_font_size:                        16px !default;
      $border_color:                          lighten($body_text_color, 30) !default;
      $default_border:                        1px solid $border_color !default;
      $button_border_color:                   rgba(0, 138, 189, .75) !default;
      $table_head_color:                      lighten($body_text_color, 60) !default;

这是我的_layout.scss文件

body {
  border-top: 5px solid $c_blue;
  padding-top: 10px;
  line-height: 24px;
}

.page-wrapper {
  float: right;
  width: 100%;
  @include transition-duration(0.2s);
}

.hidden { display: none }

#logo {
  margin-top: 10px;
}

#welcome-message {
  text-align: center;
  margin-top: 20px;

  h1 {
    font-weight: 400;
    color: $body_text_color;

    a {
      color: $c_orange;

      &:hover {
        color: $c_green !important;
      }
    }
  }
}

#latest-products {
  h3 { color: $c_orange }
  hr { border-bottom-color: lighten($c_orange, 40) }

  .product-image a { border-color: lighten($c_orange, 40) }
  .product-name { color: $c_orange !important; }

  .bx-pager.bx-default-pager a.active,
  .bx-pager.bx-default-pager a:hover {
    background-color: $c_orange !important;
  }
}

#featured-products {
  h3 { color: $c_blue }
  hr { border-bottom-color: lighten($c_blue, 30) }

  .product-image a { border-color: lighten($c_blue, 30) }

  .bx-pager.bx-default-pager a.active,
  .bx-pager.bx-default-pager a:hover {
    background-color: $c_blue !important;
  }
}

#latest-products, #featured-products {
  margin: 40px 0 ;
  text-align: center;

  .bx-wrapper {
    margin-top: 40px;

    .bx-controls {
      bottom: inherit;
      top: -35px;
    }
  }

  h3 {
    text-align: center;
    font-weight: 400;
    display: inline-block;
    padding: 0 20px;
    width: auto;
    background-color: white;
    border: none;
    position: relative;
    z-index: 1;
  }

  hr {
    position: relative;
    z-index: 0;
    margin-top: -15px;
    border-bottom-width: 2px;
  }

  ul {
    margin-top: 30px;
  }

  .product-image {
    a {
      @include border-radius(165px);
      border-width: 2px;
      width: 160px;
      height: 160px;
    }

    img {
      @include border-radius(45px);
    }
  }
}

#sidebar {
  margin-bottom: 30px;
}

ul#products {
  max-width: 600px;
}

ul#products li {
  margin-bottom: 20px;

  a.info {
    height: inherit;
    font-weight: 400;
    color: $c_green;
  }

  .price {
    font-size: 24px;
  }

  .product-image {
    border: none;
    min-height: 155px;
    padding: 0;

    a {
      border-color: lighten($c_blue, 30);
      border-width: 2px;
      padding: 30px 22px 30px 20px;
      float: none;

      img {
        @include border-radius(0);
      }
    }
  }
}

#wrapper {
  margin-top: 30px;
}


#sidebar_products_search {
  .filter-title {
    color: $c_blue;
    border-color: lighten($c_blue, 30);
  }

  .filter_choices {
    font-size: 14px;
    list-style: none;
  }
}


.taxons-list {
  margin-bottom: 40px;
}

footer#footer {
  @include single-box-shadow(darken($c_blue, 10), 0, 0, 15px, 0, true);
  // background: image-url("spree/fancy/footer-bg.png") repeat center;
  background-color: lighten($c_blue, 5);
  margin-top: 30px;
  border-top: 5px solid lighten($c_blue, 30);
  padding-top: 30px;
  font-size: 14px;
  line-height: 24px;

  &, a, h5 {
    color: white;
  }

  a:hover {
    color: lighten($c_green, 30) !important;
  }

  h5 {
    text-transform: uppercase;
    line-height: 52px;
    margin-bottom: 23px;
    font-size: 17px;
  }

  p {
    padding-top: 0;
  }

  ul {
    list-style: none;

    li {

    }
  }
}

这是我的fancy.scss文件：

/*
 = require jquery-ui-1.9.2.custom
 = require jquery.bxslider
 = require icons
 = require icons-codes
*/

@import 'compass';

@import 'compass/css3';

@import 'spree/fancy/variables';
@import 'spree/fancy/variables_override';

@import 'spree/fancy/shared/typography';
@import 'spree/fancy/shared/forms';
@import 'spree/fancy/shared/layout';
@import 'spree/fancy/shared/tables';

@import 'spree/fancy/components/slider';
@import 'spree/fancy/components/product_item';
@import 'spree/fancy/components/search';
@import 'spree/fancy/components/cart';
@import 'spree/fancy/components/breadcrumbs';
@import 'spree/fancy/components/variants';
@import 'spree/fancy/components/messages';
@import 'spree/fancy/components/navigation';
@import 'spree/fancy/components/pagination';


@import 'spree/fancy/sections/checkout';
@import 'spree/fancy/sections/cart';
@import 'spree/fancy/sections/user';
@import 'spree/fancy/sections/contact_us';

@import 'spree/fancy/shared/media';

/*----- These are the static pages below --------*/

@import 'spree/fancy/components/pages/about';
@import 'spree/fancy/components/pages/contact';
@import 'spree/fancy/components/pages/distribution';
@import 'spree/fancy/components/pages/faq';
@import 'spree/fancy/components/pages/manufacturers';
@import 'spree/fancy/components/pages/pickup';
@import 'spree/fancy/components/pages/returns';
@import 'spree/fancy/components/pages/services';
@import 'spree/fancy/components/pages/shipping';
@import 'spree/fancy/components/pages/suppliers';

我注意到的一些奇怪的事情就是在我的fancy.scss文件中显示@import＆＃39; compass / css3＆＃39;的行。看起来与该文件中的其余部分略有不同。 css3中的3是紫色，而该文件中的所有其余代码都是白色。可能由于某种原因导入不起作用吗？

有关正在发生的事情的其他任何想法？

这是我的Gemfile.lock 

GIT
  remote: git://github.com/spree/spree_fancy.git
  revision: bdeaeb9ced29a4e3204d8bc9988b57808b5a71d8
  branch: 2-2-stable
  specs:
    spree_fancy (1.3.0)
      compass-rails
      deface (~> 1.0.0rc3)
      jquery-ui-rails
      spree_core (~> 2.2)

GIT
  remote: https://github.com/spree/spree_auth_devise.git
  revision: 81a0fbb2db15efbbb50d0d139bbc41aee7fa58a1
  branch: 2-2-stable
  specs:
    spree_auth_devise (2.2.0)
      cancan (~> 1.6.10)
      devise (~> 3.2.3)
      devise-encryptable (= 0.1.2)
      json
      multi_json
      spree_core (~> 2.2.0)

GIT
  remote: https://github.com/spree/spree_gateway.git
  revision: ea9dd046848523c79845abbd5462f5e13941276e
  branch: 2-2-stable
  specs:
    spree_gateway (2.2.1)
      spree_core (~> 2.2.0)

GEM
  remote: https://rubygems.org/
  specs:
    actionmailer (4.0.5)
      actionpack (= 4.0.5)
      mail (~> 2.5.4)
    actionpack (4.0.5)
      activesupport (= 4.0.5)
      builder (~> 3.1.0)
      erubis (~> 2.7.0)
      rack (~> 1.5.2)
      rack-test (~> 0.6.2)
    active_utils (2.2.1)
      activesupport (>= 2.3.11)
      i18n
    activemerchant (1.42.9)
      active_utils (~> 2.0, >= 2.0.1)
      activesupport (>= 2.3.14, < 5.0.0)
      builder (>= 2.1.2, < 4.0.0)
      i18n (~> 0.5)
      json (~> 1.7)
      money (< 7.0.0)
      nokogiri (~> 1.4)
    activemodel (4.0.5)
      activesupport (= 4.0.5)
      builder (~> 3.1.0)
    activerecord (4.0.5)
      activemodel (= 4.0.5)
      activerecord-deprecated_finders (~> 1.0.2)
      activesupport (= 4.0.5)
      arel (~> 4.0.0)
    activerecord-deprecated_finders (1.0.3)
    activesupport (4.0.5)
      i18n (~> 0.6, >= 0.6.9)
      minitest (~> 4.2)
      multi_json (~> 1.3)
      thread_safe (~> 0.1)
      tzinfo (~> 0.3.37)
    acts_as_list (0.3.0)
      activerecord (>= 3.0)
    arel (4.0.2)
    awesome_nested_set (3.0.0.rc.5)
      activerecord (>= 4.0.0, < 5)
    aws-sdk (1.27.0)
      json (~> 1.4)
      nokogiri (>= 1.4.4)
      uuidtools (~> 2.1)
    bcrypt (3.1.7-x86-mingw32)
    builder (3.1.4)
    cancan (1.6.10)
    canonical-rails (0.0.7)
      rails (>= 3.1, < 5.0)
    chunky_png (1.3.1)
    climate_control (0.0.3)
      activesupport (>= 3.0)
    cocaine (0.5.4)
      climate_control (>= 0.0.3, < 1.0)
    coffee-rails (4.0.1)
      coffee-script (>= 2.2.0)
      railties (>= 4.0.0, < 5.0)
    coffee-script (2.2.0)
      coffee-script-source
      execjs
    coffee-script-source (1.7.0)
    colorize (0.7.3)
    compass (0.12.6)
      chunky_png (~> 1.2)
      fssm (>= 0.2.7)
      sass (~> 3.2.19)
    compass-rails (1.1.7)
      compass (>= 0.12.2)
      sprockets (<= 2.11.0)
    deface (1.0.0)
      colorize (>= 0.5.8)
      nokogiri (~> 1.6.0)
      rails (>= 3.1)
    devise (3.2.4)
      bcrypt (~> 3.0)
      orm_adapter (~> 0.1)
      railties (>= 3.2.6, < 5)
      thread_safe (~> 0.1)
      warden (~> 1.2.3)
    devise-encryptable (0.1.2)
      devise (>= 2.1.0)
    erubis (2.7.0)
    execjs (2.2.0)
    ffaker (1.24.0)
    font-awesome-rails (4.1.0.0)
      railties (>= 3.2, < 5.0)
    friendly_id (5.0.3)
      activerecord (>= 4.0.0)
    fssm (0.2.10)
    highline (1.6.21)
    hike (1.2.3)
    httparty (0.13.1)
      json (~> 1.8)
      multi_xml (>= 0.5.2)
    i18n (0.6.9)
    jbuilder (1.5.3)
      activesupport (>= 3.0.0)
      multi_json (>= 1.2.0)
    jquery-rails (3.1.1)
      railties (>= 3.0, < 5.0)
      thor (>= 0.14, < 2.0)
    jquery-ui-rails (4.1.2)
      railties (>= 3.1.0)
    json (1.8.1)
    kaminari (0.15.1)
      actionpack (>= 3.0.0)
      activesupport (>= 3.0.0)
    mail (2.5.4)
      mime-types (~> 1.16)
      treetop (~> 1.4.8)
    mime-types (1.25.1)
    mini_portile (0.6.0)
    minitest (4.7.5)
    monetize (0.3.0)
      money (~> 6.1.0.beta1)
    money (6.1.1)
      i18n (~> 0.6.4)
    multi_json (1.10.1)
    multi_xml (0.5.5)
    nokogiri (1.6.2.1-x86-mingw32)
      mini_portile (= 0.6.0)
    orm_adapter (0.5.0)
    paperclip (3.4.2)
      activemodel (>= 3.0.0)
      activerecord (>= 3.0.0)
      activesupport (>= 3.0.0)
      cocaine (~> 0.5.0)
      mime-types
    paranoia (2.0.2)
      activerecord (~> 4.0)
    pg (0.15.1-x86-mingw32)
    polyamorous (0.6.4)
      activerecord (>= 3.0)
    polyglot (0.3.5)
    rabl (0.9.3)
      activesupport (>= 2.3.14)
    rack (1.5.2)
    rack-test (0.6.2)
      rack (>= 1.0)
    rails (4.0.5)
      actionmailer (= 4.0.5)
      actionpack (= 4.0.5)
      activerecord (= 4.0.5)
      activesupport (= 4.0.5)
      bundler (>= 1.3.0, < 2.0)
      railties (= 4.0.5)
      sprockets-rails (~> 2.0.0)
    rails_12factor (0.0.2)
      rails_serve_static_assets
      rails_stdout_logging
    rails_serve_static_assets (0.0.2)
    rails_stdout_logging (0.0.3)
    railties (4.0.5)
      actionpack (= 4.0.5)
      activesupport (= 4.0.5)
      rake (>= 0.8.7)
      thor (>= 0.18.1, < 2.0)
    rake (10.3.2)
    ransack (1.1.0)
      actionpack (>= 3.0)
      activerecord (>= 3.0)
      polyamorous (~> 0.6.0)
    rdoc (4.1.1)
      json (~> 1.4)
    sass (3.2.19)
    sass-rails (4.0.3)
      railties (>= 4.0.0, < 5.0)
      sass (~> 3.2.0)
      sprockets (~> 2.8, <= 2.11.0)
      sprockets-rails (~> 2.0)
    sdoc (0.4.0)
      json (~> 1.8)
      rdoc (~> 4.0, < 5.0)
    select2-rails (3.4.9)
      sass-rails
      thor (~> 0.14)
    spree (2.2.2)
      spree_api (= 2.2.2)
      spree_backend (= 2.2.2)
      spree_cmd (= 2.2.2)
      spree_core (= 2.2.2)
      spree_frontend (= 2.2.2)
      spree_sample (= 2.2.2)
    spree_api (2.2.2)
      rabl (= 0.9.3)
      spree_core (= 2.2.2)
      versioncake (~> 1.2.0)
    spree_backend (2.2.2)
      jquery-rails (~> 3.1.0)
      jquery-ui-rails (~> 4.1.0)
      select2-rails (~> 3.4.7)
      spree_api (= 2.2.2)
      spree_core (= 2.2.2)
    spree_cmd (2.2.2)
      thor (~> 0.14)
    spree_core (2.2.2)
      activemerchant (~> 1.42.3)
      acts_as_list (= 0.3.0)
      awesome_nested_set (~> 3.0.0.rc.3)
      aws-sdk (= 1.27.0)
      cancan (~> 1.6.10)
      deface (~> 1.0.0)
      ffaker (~> 1.16)
      font-awesome-rails (~> 4.0)
      friendly_id (= 5.0.3)
      highline (~> 1.6.18)
      httparty (~> 0.11)
      json (~> 1.7)
      kaminari (~> 0.15.0)
      monetize
      paperclip (~> 3.4.1)
      paranoia (~> 2.0)
      rails (~> 4.0.5)
      ransack (~> 1.1.0)
      state_machine (= 1.2.0)
      stringex (~> 1.5.1)
      truncate_html (= 0.9.2)
    spree_frontend (2.2.2)
      canonical-rails (~> 0.0.4)
      jquery-rails (~> 3.1.0)
      spree_api (= 2.2.2)
      spree_core (= 2.2.2)
      stringex (~> 1.5.1)
    spree_sample (2.2.2)
      spree_core (= 2.2.2)
    sprockets (2.11.0)
      hike (~> 1.2)
      multi_json (~> 1.0)
      rack (~> 1.0)
      tilt (~> 1.1, != 1.3.0)
    sprockets-rails (2.0.1)
      actionpack (>= 3.0)
      activesupport (>= 3.0)
      sprockets (~> 2.8)
    sqlite3 (1.3.9-x86-mingw32)
    state_machine (1.2.0)
    stringex (1.5.1)
    thor (0.19.1)
    thread_safe (0.3.4)
    tilt (1.4.1)
    treetop (1.4.15)
      polyglot
      polyglot (>= 0.3.1)
    truncate_html (0.9.2)
    turbolinks (2.2.2)
      coffee-rails
    tzinfo (0.3.39)
    uglifier (2.5.1)
      execjs (>= 0.3.0)
      json (>= 1.8.0)
    uuidtools (2.1.4)
    versioncake (1.2.0)
      actionpack (>= 3.2)
      activesupport (>= 3.2)
      railties (>= 3.2)
      tzinfo
    warden (1.2.3)
      rack (>= 1.0)

PLATFORMS
  x86-mingw32

DEPENDENCIES
  coffee-rails (~> 4.0.0)
  jbuilder (~> 1.2)
  jquery-rails
  pg
  rails (= 4.0.5)
  rails_12factor
  sass-rails (~> 4.0.2)
  sdoc
  spree (= 2.2.2)
  spree_auth_devise!
  spree_fancy!
  spree_gateway!
  sqlite3
  turbolinks
  uglifier (>= 1.3.0)

这是我的Gemfile：

source 'https://rubygems.org'

ruby '2.0.0'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.0.5'

# Use sqlite3 as the database for Active Record
group :development do
  gem 'sqlite3'
end

group :production do
  gem 'pg'
  gem 'rails_12factor'
end

# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.2'

# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'

# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'

# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'

# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 1.2'

group :doc do
  # bundle exec rake doc:rails generates the API under doc/api.
  gem 'sdoc', require: false
end

# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano', group: :development

# Use debugger
# gem 'debugger', group: [:development, :test]

gem 'spree', '2.2.2'
gem 'spree_gateway', :git => 'https://github.com/spree/spree_gateway.git', :branch => '2-2-stable'
gem 'spree_auth_devise', :git => 'https://github.com/spree/spree_auth_devise.git', :branch => '2-2-stable'
gem 'spree_fancy', :git => 'git://github.com/spree/spree_fancy.git', :branch => '2-2-stable'

1 个答案:

答案 0 :(得分：2)

好的，我想出来了。 问题出在application.css文件中。 spree-fancy项目问题有一个示例应用程序链接：

https://github.com/vike27/surplusmerchant2/blob/master/app/assets/stylesheets/application.css

查看*= require_tree .指令。这告诉Sass gem递归地要求所有子目录。它不是从fancy.css文件开始，而是从嵌套的子目录开始。所以它在使用任何变量的第一个文件上失败，因为还没有加载变量！

只需将*= require_tree .替换为*= require ./spree/fancy即可。

相关问题
最新问题