How to watch over SASS to generate compressed as well as expanded or a combination of other styles?

Question

I am using SASS.

But how to watch over SASS files (*.scss) from the root of the project folder to generate compressed (minified) as well as expanded (prettified) or a combination of other styles?

The reference in the SASS documentation does not seem to be (new) user friendly.

Answer 1

If (for whatever reason?) you need both output variants to exist at the same time, you could use a task runner like Grunt and define two different tasks and then run them both at once. You would need to specify two seperate output directories though, otherwise the second task would overwrite the result of the first task, like so:

sass: {
    expanded: {
        options: {
             style: 'expanded'
        },
        files: {
             'css-expanded/*.css': 'sass/*.scss'
        }
    }
    compressed: {
        options: {
             style: 'compressed'
        }
        files: {
             'css-compressed/*.css': 'sass/*.scss'
        }
    }
}

grunt.registerTask('compile': ['sass:expanded', 'sass:compressed']);

Presumably, you probably don't want/need both versions of the css output of the same time though, I guess you want expanded output during development for debugging, and compressed output when building your project? If that's the case, you'd still need to specify two sass tasks/targets, but define a separate grunt task for each (but use the same output directory):

sass: {
    expanded: {
        options: {
             style: 'expanded'
        },
        files: {
             'css': 'sass/*.scss'
        }
    }
    compressed: {
        options: {
             style: 'compressed'
        }
        files: {
             'css': 'sass/*.scss'
        }
    }
}

grunt.registerTask('dev': ['sass:expanded']);
grunt.registerTask('build': ['sass:compressed'];

Edit: If you want both version to live in the same output directory at the same time and the output css files don't need the same name for both versions, you could of course use a specific name for one of them *.css and *.min.css:

sass: {
    expanded: {
        options: {
             style: 'expanded'
        },
        files: {
             'css-expanded/*.css': 'sass/*.scss'
        }
    }
    compressed: {
        options: {
             style: 'compressed'
        }
        files: {
             'css-compressed/*.min.css': 'sass/*.scss'
        }
    }
}

grunt.registerTask('compile': ['sass:expanded', 'sass:compressed']);