sass --watch with automatic minify?

Question

Is there a way to run:

sass --watch a.scss:a.css

but have a.css end up being minified?

How would I avoid having to run a separate minification step as I compile my stylesheet?

score 649 · Accepted Answer · edited Sep 21 '21 at 08:24

649

sass --watch a.scss:a.css --style compressed

Consult the documentation for updates:

edited Sep 21 '21 at 08:24

SWdV

answered Jan 24 '12 at 00:07

tester

44

You can also minify "plain" css this way: `sass --watch a.css:a.min.css --style compressed --scss` – sam Mar 08 '13 at 18:08
13

All of the output styles are listed [here](http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style) (nested, expanded, compact, and compressed) – allicarn Aug 20 '13 at 14:59
4

Can I get outputs in combination of styles like; I need compressed and expanded outputs as well. How to do that? – Temp O'rary Apr 14 '15 at 19:48
1

Curiously, the output of `--style compressed` is still not as compact as some online minifiers. – Escher Nov 09 '15 at 09:24
3

This works for me to have sass create both a non-minified and minified css file at the same time `sass --watch sass/style.scss:css/style.css --watch css/style.css:css/style.min.css --style compressed --scss` – Alex Wright Jun 18 '17 at 20:45
3

This doesn't seem to work in the latest version 3.5.4 of Sass? – pjk_ok Dec 30 '17 at 23:50
@AlexWright when I run now your code both file have the same result, style.css & style.min.css both are minified :'( – Antonio Ángel Estrada Pérez Apr 27 '20 at 11:21

score 29 · Answer 2 · edited Apr 28 '16 at 03:26

If you are using JetBrains editors like IntelliJ IDEA, PhpStorm, WebStorm etc. Use the following settings in Settings > File Watchers.

Convert style.scss to style.css set the arguments

--no-cache --update $FileName$:$FileNameWithoutExtension$.css

and output paths to refresh

$FileNameWithoutExtension$.css

Convert style.scss to compressed style.min.css set the arguments

--no-cache --update $FileName$:$FileNameWithoutExtension$.min.css --style compressed

and output paths to refresh

$FileNameWithoutExtension$.min.css

score 13 · Answer 3 · edited Jul 01 '15 at 18:23

13

If you're using compass:

compass watch --output-style compressed

edited Jul 01 '15 at 18:23

Community

answered Sep 05 '14 at 12:02

Olivier Loynet

16

This is a compass command and not just sass. You're assuming that compass is being used when it may not be. – Arielle Lewis Jan 27 '15 at 18:04
4

This works for me too because I'm using compass instead of just sass. – fedmich Feb 26 '15 at 18:42
3

Those who gave downvote just for because this code is compass should think again if the downvote is really necessary for him – fedmich Feb 26 '15 at 18:42
Why would people downvote this answer? This was exactly what I was searching for in the first place and I am pretty sure I am not the only one because `minify compass output` Google search leads here. – Kunok May 30 '17 at 12:04
@fedmich because compass was never mentioned in the original question, and since this answer lacks any explanation what the actual command does it si not helpful, if you don't use compass. I did not downvote, but I gues that is the reason, and this would be a perfectly fine answer, if there were at least a few words of description. – Matthias Seifert Dec 19 '18 at 13:27

score 3 · Answer 4 · answered Jul 25 '20 at 13:01

3

There are some different way to do that

sass --watch --style=compressed main.scss main.css

or

sass --watch a.scss:a.css --style compressed

or

By Using visual studio code extension live sass compiler

answered Jul 25 '20 at 13:01

MD SHAYON

score 2 · Answer 5 · answered May 24 '22 at 20:26

2

This worked for me :

sass --watch --style=compressed a.scss:a.css

answered May 24 '22 at 20:26

Waseem Alhabash

Guys! Just an update. Nowadays it will work like this: `sass --watch styles.scss styles.css --style compressed`. – Julio Graffin Jul 18 '22 at 10:06

5 Answers5