Question

Is there something that I can use that will quickly merge multiple CSS imports into one CSS file.

For example, let’s say I have a main styles.css file that has a large number of imports during development:

@import url('normalize.css');
@import url('1.css');
@import url('2.css');
...
@import url('10.css');

I separate them during development just for my own sanity.

I’d like to minimize HTTP requests during production though to 1 styles file, rather than 11, 12 , etc.

So, is there something, other than manually copy/pasting into one file, that can put these imports into 1 file?

Does LESS or SASS do something like this?

Answer 1

LESS and SASS do this and more. There are many server-side ways to collate your css files into a single document (Less can do that with js too but I wouldn’t recommend this as you would lose your styling with js off)

Yahoo YUI compressor / Rhino do the same if I am not mistaken: http://developer.yahoo.com/yui/compressor/#work

if you check the global options, this one works for you:

-o outfile

  Place output in file outfile. If not specified, the YUI Compressor will
  default to the standard output, which you can redirect to a file.
  Supports a filter syntax for expressing the output pattern when there are
  multiple input files.  ex:
      java -jar yuicompressor.jar -o '.css$:-min.css' *.css
  ... will minify all .css files and save them as -min.css