I'm trying to concatenate (unify) multiple .css files generated from SASS and I'm using Compass to process my files.
I'm using Grunt to perform some tasks, including concatenating files, however as I try to merge the generated .css files, many of the classes are being repeated in the file with the unified files. That is, duplicating everything that was created.
Does anyone know if Compass does this sort of concatenation by default, beyond understanding the files?
Are you using link ? If it is not it can help you in the concatenation process, just put in your HTML:
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="bower_components/jquery-ui/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" href="bower_components/jquery-ui/themes/ui-lightness/jquery.ui.theme.css">
<!-- endbuild -->
And in Grunfile add:
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
options: {
dest: '<%%= yeoman.dist %>'
},
html: '<%%= yeoman.app %>/index.html'
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
options: {
assetsDirs: ['<%%= yeoman.dist %>']
},
html: ['<%%= yeoman.dist %>/{,*/}*.html'],
css: ['<%%= yeoman.dist %>/styles/{,*/}*.css']
},
You can create a main.scss file and put it in% s of the .scss you want to concatenate. Then just compile main.scss:
$ compass compile main.scss
Example of main.scss:
@import 'header.scss';
@import 'footer.scss';