Refactoring and removing unused CSS from SASS/LESS files

Question

I am working on a big single page application [backbonejs and rails] which has LESS as the CSS preprocessor and the generated .css files has grown to such an extent that for IE we have to split it into 3 files with http://blesscss.com/

Though there are tools to detect unused css and linting css, I am unable to find a proper solution for refactoring LESS/SASS files directly from uncompiled files instead of a single large generated .css file.

Would like to know what is the best approach doing these tasks?

Thanks in advance !

Answer 1

1. For finding and remove unused CSS use Uncss which has implementation as tasks for Grunt and Gulp
2. For finding unused variables in your SASS/LESS code- some script like this one.
3. For debug source files instead one generated css- source maps
4. To minify your code, use compressed output styles
5. To automatically add vendor prefixes for browsers in your css use Autoprefixer
6. Generally- provide Grunt or Gulp build for your css

P.S.: Some of the links are just for SASS- for Less there are similar solutions which are easy to find.

Answer 2

I am using koala fro minify and combine SASS,LESS,CSS,JS

see koala and Docs