CODEWITHSUNDEEP
phpcssperformance.htaccessimport
Integralist
Integralist

Reputation: 2211

How can I concatenate CSS files using @import?

We are building a large site which requires very modular CSS. The problem we have is that we like using the @import statement as it's very clean, but the major downside is the performance (all CSS files referenced are loaded synchronously i.e. not in parallel).

Does anyone know of a way to use PHP (or even .htaccess) to find any CSS files referenced via @import and then generate a single CSS file?

I've looked at loads of examples (some of which are seen here): http://robertnyman.com/2010/01/19/tools-for-concatenating-and-minifying-css-and-javascript-files-in-different-development-environments/ but none of them work with @import.

Thanks.

Upvotes: 4

Views: 2168

Answers (4)

Pavi
Pavi

Reputation: 1739

You could use the PHP version of LESS. It will process the styles in a style file and those imported, into one file within the server itself. You can minimize it too. Then store it in a cache. This will enable the LessPHP compiler to see if the processed file is already in the cache, and whether any of the involved style files have been changed. If nothing has changed, it will simply return the cached style file. The only difference you will need to do in the markup will be to change .css to .less in the <link> tag. Also this will help you to write LESS css, which is a bonus.

The detailed documentation on how to do install LessPHP, auto-compile and cache the LESS files are given in the official website and on GITHub.

Upvotes: 0

Michael Guild
Michael Guild

Reputation: 834

use compass. it compiles all of your styles into one file.

compass-style.org

Upvotes: 0

Louis-Philippe Huberdeau
Louis-Philippe Huberdeau

Reputation: 5431

Using assetic to manage CSS and JavaScript does miracles. It is proposed by default when using Symfony2, but can be used as a standalone library in PHP. If used correctly, it will let you use your files in their original format while debugging and concatenate/minify everything in production.

https://github.com/kriswallsmith/assetic

I have not had any issues with @import.

It will also let you use those alternative CSS languages if that is something you are into.

Upvotes: 0

pomeh
pomeh

Reputation: 4912

Less can do that: http://lesscss.org/#-importing

Maybe sass also, but I'm not sure

Upvotes: 1

Related Questions