Concatenate . Sass files with Compass

Question

I am trying to concatenate (unify) several . css files generated from SASS and I am using Compass to process my files.

I’m using Grunt to perform some tasks, including concatenating files, but as I try to join the files . generated css, many of the classes are repeating themselves in the file with the unified files. That is, duplicating everything that was created.

Does anyone know if Compass does this type of concatenation by default, beyond the understanding of the files?

Answer 1

You are using https://github.com/yeoman/grunt-usemin? If not, it can help you in the concatenation process, just put it 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']
    },

Answer 2

You can create a file main.scss and put in it the @imports of the . scss you want to concatenate. Then compile main.scss:

$ compass compile main.scss

Example of main.scss:

@import 'header.scss';
@import 'footer.scss';