search

rails / sass-rails

Ruby on Rails stylesheet engine for Sass
MIT License
860 stars 333 forks source link

css calc with mixed units in imported CSS file #364

Closed samueljseay closed 8 years ago

samueljseay commented 8 years ago

I'm having an issue I'm tearing my hair out with and have tried multiple approaches but it seems sass-rails causes issues every time. (in production only).

I decided to wrap up a complicated SASS theme in a gem and import it into my project. The simplest way was to compile the SASS within that gem and then just use the built CSS file in a Rails project (where I cannot remove sass-rails as a dependency).

The generated CSS file uses calc(100% + 215px) which i achieved in the theme using unquote, but then sass-rails tries to compile the plain css file again when I include it via any method. whether I try requiring the file into application.css or just straight up use it via stylesheet_link_tag. sass rails of course thinks the CSS is invalid (because SASS does...)

I should also note that I haven't been able to import the plain SCSS from the gem into application.scss either. It also seems to try reparse the compiled scss after initial compile and fails with the % px issue.

Has this been come up against before? Is there a way to tell sass-rails to leave my CSS file alone?

samueljseay commented 8 years ago

Just a note about what I have ended up doing which is hacky as! I renamed the css file with an extension that sass-rails doesn't handle and then used mime type configuration to serve it up.

e.g.

# This is not ideal, but it stops sass rails trying to interpret my valid compiled CSS
Rack::Mime::MIME_TYPES['.my-dodgy-ext'] = 'text/css'

I wonder, would it be reasonable to request a feature for excluding files from sass rails?

rafaelfranca commented 8 years ago

Can you please provide a sample application that reproduces the error?

samueljseay commented 8 years ago

Another couple of hours with it and I finally found the issue. Sorry (thankfully) this isn't a sass rails issue. A variable in the theme was being set as a calc but then being used like:

- calc(100%+215px);

^ note the negative sign at beginning

I'm not sure why compass never complained about this and happily compiled it in my other project... anyway. sorry!