11

Now, while I am developing my project I have three files, "main.css", "about.css" and "news.css" (for example). Is it possible to compile them into one "final.css" for production?

hopper
  • 13,060
  • 7
  • 49
  • 53
Itsmeromka
  • 3,621
  • 9
  • 46
  • 79

1 Answers1

36

The SASS import directive is used to import the contents of one file into another, so you could create a file final.scss whose contents are:

@import 'main';
@import 'about';
@import 'news';

You'd then need to rename your files to have "scss" extensions so the import directive will find them. If you don't want the main.scss, about.scss, and news.scss files to compile to CSS files themselves, you can use partials by prefixing the filenames with an underscore (i.e., _main.scss, _about.scss, _news.scss).

yarl
  • 3,107
  • 1
  • 22
  • 28
hopper
  • 13,060
  • 7
  • 49
  • 53
  • Is it the preferred way to compile all scss in one css file? – Vincent Nov 16 '13 at 14:00
  • 2
    Yes, usually. Combining all CSS into a single file helps with performance by reducing the number of HTTP requests per page. Here's a good reference: http://developer.yahoo.com/performance/rules.html#num_http – hopper Nov 16 '13 at 18:06