Minify CSS with Node-Sass

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.

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 Output Style automate with minified file

Irrespective of what you're building your site in, if you want total control over compilation/minification/whatever then well, that's what tooling such as gulp is there for.

It looks like you were trying to compile SCSS to CSS to a file, then take that compiled CSS file and minify it. That CLI tool won't do that, but it can absolutely do the compilation/compression at the same time, directly from the source SCSS.

Using the binary you're using, this is going to compile and compress, taking ./sass/style.scss and outputting the result to ./css/style.min.css

sass sass/style.scss:css/style.min.css --style compressed

Add --watch if you want to have it react to file changes in your scss file.

Or perhaps you were trying to get a unminified and a minified version alongside. In that case, you'll simply have to run two commands. Again, gulp is there to automate this process.

Other binaries will have different flags and options, and of course there is the gulp option which I'd certainly recommend given you then don't have to remember any lengthy commands and you can share your chosen structure/tasks accross projects.

How to compile SASS and minify CSS and create its map with gulp 4 in same task

Create new function where you run both functions in series from your first code.

Example

function compileAndMinify(){
   return gulp.series(css(),minCss()); 
}

How to generate single minify file of css using Compass?

Minifying with Sass

In the command line, enter the following:

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

Minifying with Compass

First, make sure you’ve setup your project in Compass by entering the following in the command line:

$ compass create path/to/your_project

Afterwards, you’ll notice that Compass has created two folders in your project directory; /sass/ and /stylesheets/. It has also created a config.rb file.

Open the config.rb file and you should see something that looks a little like the following:

# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
output_style = :compressed # :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

In your config.rb file, Line 11 will likely be commented out with the # sign. Uncomment the output_style line so that it reads like the example above.

Finally, you’ll want to get Compass to start watching for changes to your scss files. In the command line, enter:

$ cd /path/to/your_project
$ compass watch

And finish!

---

Credits

---

Related Topics