19

I can use Sass to compile multiple .SCSS or .SASS input files into a single .CSS output file using @import as described here.

If I use @import to include normal .CSS files, they are not merged. The output .CSS file still contains the @import directives. That makes sense.

But is there a way I can override this behavior, perhaps a command-line switch to the Sass compiler? In other words, can I tell Sass to attempt to forcibly merge @import "foo.css"; just as if it were a .SCSS file?

I'm using a third-party library (Google Closure Library) with many .CSS files. I'm only using a few of these in my project. I'd rather avoid manual solutions such as renaming all these files as .SCSS (although this seems to work) or copying and pasting their contents into my .SCSS file (also works). And I don't want to serve them all to be imported on the client-side. I'd really just like Sass to include the few .CSS files that I use 'as is' and produce a single output stylesheet. Possible? Are there any other tools I should look at?

jwfearn
  • 28,781
  • 28
  • 95
  • 122
  • Are you able to use any server-side scripting language? I frequently have the server merge things like CSS and JS to allow for updating for JS libraries and such. If you're able to go this route and can give a scripting language I'd be happy to help you with a functional example. – Liam Apr 16 '11 at 17:47
  • @Liam, I use Ruby on the server side. – jwfearn Apr 16 '11 at 17:52

3 Answers3

11

every CSS file is a valid SCSS too.. so if you change the files you need "invisibly" imported or merged to _filename.scss then @import from the main scss file using @import "filename"; (extension optional) it should compile to one big CSS with no @import statements inside it

edited to add: sorry just saw your edit after a browser crash.. and see it's not what you're looking for, I don't know of another way

clairesuzy
  • 27,296
  • 8
  • 54
  • 52
  • 2
    that will work but I'm looking for a solution that does not require me to modify the third-party library of .CSS files in any way (including filenames and extensions.) I want to tell the Sass compiler "I know these .CSS files are valid .SCSS so treat them as such." – jwfearn Apr 16 '11 at 17:47
  • @jwfearn just added an edit.. had a browser freeze and didn't see your edit in time, sorry! – clairesuzy Apr 16 '11 at 17:52
3

I haven't found a way to do this in Sass.

My workaround is to import third part libraries directly from their URLs. Of course this only works for CSS libraries that are served via URLs. It's still importing multiple files but at least I don't have to rename files and otherwise manage a modified copy of the vendor's CSS library.

Example:

// ORIGINAL: locally managed, modified copy (bad), no @import in output (good)
@import 'my_modified_copy/closure/goog/css/common.scss';

// WORKAROUND: vendor-managed (good): @import in output (bad but acceptable)
@import 'http://closure-library.googlecode.com/svn/trunk/closure/goog/css/tab.css';

Before release, I'll probably add a script to pull a current version from the vendor and rename all .css files as .scss files. But for now, the above workaround is acceptable for development.

jwfearn
  • 28,781
  • 28
  • 95
  • 122
2

This can be done server-side and save you a bit of hassle if that's an option. Since you're just merging the files together and since it's just CSS there shouldn't be any conflicts in the information that should harm your site. Also, this way gives you flexibility to make updates to the CSS as frameworks are improved.

Ruby is not my language of choice but still very viable to do everything needed here. There is a tool out there written in Ruby that will do this for you with CSS as well as JS files. Take a look at this blog post to get the rundown: http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool

I hope that this is helpful, and please let me know if you need anything else on this one.

Liam
  • 1,712
  • 1
  • 17
  • 30
  • thanks, Juicer looks cool. I may give it a try. – jwfearn Apr 16 '11 at 22:59
  • what options or tools would select in your language of choice? – jwfearn Apr 18 '11 at 15:59
  • In C# I have a script I wrote a while ago that merges these on the fly when one file has been updated. I store this concatenated file on the server instead of hitting all files from the browser. Upon page load, I check the headers of the separate files against dates stored in the concatenated file to see if an update has happened necessitating the file to be recompiled from its external parts. This is hooked into a param in the admin/CMS if this should happen on every page load or at given intervals or if it should be forced upon next page loaded within the site. – Liam Apr 20 '11 at 18:38