Within our Rails 3.2 app, I've implemented Sass imports to manage the majority of our styles. The structure of my application.css.scss file is as follows:
application.css
/*
*= require_self
*= require_tree ./vendor
*= require admin
*/
admin.css.scss
// Reset
@import "global/reset";
// General Variables
@import "admin/general/_variables";
// Main Elements
@import "admin/general/_typography";
// Layout
@import "global/_layout";
@import "admin/general/_gridset";
// Modules
@import "admin/modules/_table";
@import "admin/modules/_forms";
@import "admin/modules/_buttons";
// Styles
@import "admin/_style-clean";
@import "admin/_style-images";
// Features
@import "admin/features/features";
Error message: Sass::SyntaxError - Undefined variable: "$body-bg". (in /var/www/apps/dev_wbs/releases/20130624191222/app/assets/stylesheets/admin/_style-clean.css.scss)
The _variables.css.scss file that is imported contains $body-bg, which is used in _style-clean.css.scss
Initially, I wrote the code in Sass syntax, but encountered Sass::SyntaxError - Undefined variable: "$body-bg" whenever we deployed to the dev server. The $body-bg variable is defined in the variables file, yet the error specifically points to the _style-clean.scss file. I attempted to manually add the variable to the style-clean file, only to face another variable error related to the typography file, despite it being declared before style-clean. This led me to suspect that the assets are being pre-compiled and then combined.
Although I prefer using Sass syntax, both scss and sass versions are yielding variable errors.
Currently, all individual files follow the naming convention: _variables.css.scss.
Any assistance on resolving this issue would be greatly appreciated!