Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

sass --watch with automatic minify?

Tags:

css

sass

minify

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?

like image 768
tester Avatar asked Jan 24 '12 00:01

tester


People also ask

Can Sass minify?

There are no commands in SASS that will produce minified output.

What does sass watch mean?

The watch flag tells Sass to watch your source files for changes, and re-compile CSS each time you save your Sass. If you wanted to watch (instead of manually build) your input.scss file, you'd just add the watch flag to your command, like so: sass --watch input.scss output.css.

How do I run a sass watch?

Open up Terminal and type the command cd desktop/project . This will bring you to the correct working directory on your desktop. Once you're in the project directory, write the command sass --watch scss:css to begin auto-compiling your Sass to CSS—provided you've already created the “scss” directory.


2 Answers

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

Consult the documentation for updates:

  • https://sass-lang.com/guide
  • https://sass-lang.com/documentation/cli/dart-sass#style
like image 112
tester Avatar answered Sep 21 '22 11:09

tester


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

  1. Convert style.scss to style.css set the arguments

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

    and output paths to refresh

    $FileNameWithoutExtension$.css 
  2. 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 
like image 25
Madan Sapkota Avatar answered Sep 18 '22 11:09

Madan Sapkota