sass --watch with automatic minify?
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
sass watch files in folder and minify, but control output filename
I think you're probably looking for Compass. All this stuff is just baked into Rails, so I'm not sure exactly how everything links together, but I believe if you're using SCSS without a framework around it, then Compass is what you're after.
Download from http://compass-style.org/ and run something like this:
gem install compass
$ compass create asd --bare --sass-dir "input_directory" --css-dir "output_directory"
You can set this in a config file:
output_style = :compressed
Alternatively, you could just run a script that does something like (this is Ruby):
files = Dir["/path/to/scss/folder/*.scss"].map do |file|
"#{file}:#{file.gsub(".scss", ".min.css")}"
end
`sass --watch #{files} --style compressed`
How to Minify CSS with SCSS File Watcher in PHPStorm IDE
Probably the fastest way to achieve this is to use the compressed option, mentioned in the previous comments, as an argument. The quickest way to configure this in PHPStorm is as follows:
- Go to
File > Settings
- Inside
Project Settings
selectFile Watchers
- You should already have an SCSS watcher created here (if you have the SCSS watch plugin enabled, PHPStorm prompts you to create a watcher when opening a new .scss file.) Otherwise, enable it (more info about that in this section of the official documentation,) and then create the new watcher pressing the "+" symbol.
- Double click the watcher name to access its configuration.
- In the
Arguments
line make sure to add the--style compressed
argument - Click OK and you're done
This image shows how that configuration should look:
From that point on, your .css output files will be compressed.
Minify CSS with Node-sass
In the node-sass documentation says you have to use --output-style
, and it could be nested | expanded | compact | compressed
. To minify use compressed
For example:
node-sass -w public/css/scss/style.scss public/css/style.css --output-style compressed
will minify the CSS.
Related Topics
How to Hide Only the First Element of a Type
Break Line on White Space Between Words
Variable Sized Column with Ellipsis in a Table
:Hover Not Working on Svg When Svg Is in External File
Target First Letter of Each Word in CSS
Set the Width of Children to Fill the Parent
CSS Opacity Affecting Sibling Image Opacity
How to Use Commas in a CSS Variable Fallback
Lesscss Stops Processing Styles
Zoom Out Shiny App at Default in Browser
Sass Extend and Parent Selector
Align a Bootstrap Navbar to the Right
Chrome/Firefox Percentage Height Differences in CSS Grid
Inside Transparent Arrow on the Left
Border-Radius: 50% Not Producing Perfect Circles in Chrome
Css: Auto Height on Containing Div, 100% Height on Background Div Inside Containing Div