Running Multiple Compass-Sass Watch Operations Automatically

How to make Compass to watch several folders simultaneously?

The only workaround I found is to run several Compass instances - one per module. I bet there could be more elegant solution by adjusting Compass source code, but unfortunately I'm not familiar with Ruby...yet.

what is the difference between sass watch and compass watch

To understand the difference, you must first understand the difference between Sass and Compass.

  • Sass is a language which is an extension of CSS. It has built in math functions and adds the ability to add more functions and mixins - but it doesn't include any.
  • Compass is a framework for Sass. It adds additional functionality on top of Sass such as CSS3 mixins, layout helpers and other utilities. It also gives you the ability to add additional 3rd party frameworks into your project (called extensions).

So with that, the difference between the two are:

  • sass --watch will compile Sass files, but because it doesn't know anything about compass, it will just ignore it.
  • compass watch is just like the Sass command, only it knows about the additional Compass functionality. So when you import compass/reset - it knows what to import.

You can find a reference to all Compass' functionality here: http://compass-style.org/reference/compass/

At the top of each page it will show you which part of Compass to import. For example, here is the page about reset: http://compass-style.org/reference/compass/reset/

How does 'compass watch' work/how is it used with rails

Compass uses a configuration file located in "config/compass.rb" which tells it where the important directories are. I think it knows to look in config/compass.rb because it searches a list of predefined directories for a compass.rb config file

Heres the config file I use for my Rails 3 projects

# This configuration file works with both the Compass command line tool and within Rails.
# Require any additional compass plugins here.
project_type = :rails
project_path = Compass::AppIntegration::Rails.root
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "public/stylesheets"
sass_dir = "app/stylesheets"
images_dir = "public/images"
environment = Compass::AppIntegration::Rails.env
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
preferred_syntax = :sass

I generate this file by running the following command from the Rails root:

compass init rails --css-dir=public/stylesheets --sass-dir=app/stylesheets --images-dir=public/images -x sass --using blueprint/basic

This is the only command that I use to run compass, and I run it when generating my project through a rails template https://github.com/sid137/rails-templates/blob/master/rails3.rb . I constructed this command by reading through the compass help, and looking online, as I wanted to customize all of my compass setup. Now, I can immediately begin my projects with

compass watch .

or

compass compile .

SCSS/SASS Multiple Sites in Multiple Directories

#!/bin/bash
for i in repoa repob repoc repod
do
compass watch "$i/pathtoyourconfig.rb" &
done

How can I automatically run all gulp tasks?

This has three arguments:

gulp.task('browser-sync', gulp.series('nodemon'), () => {

in gulp v4+ you can only have two arguments, so change that to

gulp.task('browser-sync', gulp.series('nodemon', () => {

and same with

gulp.task('default', gulp.series('browser-sync', () => {

  • there will be a close paren ) to add to the ends of those functions too, like }));

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`

What are Compass and Sass and how do they differ?

From Sass and Compass in Action, by Wynn Netherland, Nathan Weizenbaum, Chris Eppstein, and Brandon Mathis:

1.3 What is Compass?

Compass helps Sass authors write smarter stylesheets and empowers a community
of designers and developers to create and share powerful frameworks. Put simply,
Compass is a Sass framework, designed to make the work of styling the web
smooth and efficient. Much like Rails as a web application framework for Ruby,
Compass is a collection of helpful tools and battle-tested best practices for Sass.

(emphasis added)

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

Fastest way to compile SCSS (Compass) + refresh the browser?

I use this stack:

  • gruntjs
  • grunt-sass (uses libsass via node-sass instead of ruby sass)
  • grunt-watch-contrib

Caveats

  • Sass indented syntax is not supported.
  • Compass is not supported

But it is much faster x100xxx...!

Read more here:

http://benfrain.com/lightning-fast-sass-compiling-with-libsass-node-sass-and-grunt-sass/

Example

To enable live reload on your page, add a script tag before your closing body tag:

<script src="//localhost:35729/livereload.js"></script>

That's an example of a Gruntfile.js:

module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
sass: {
dist: {
options: {
outputStyle: "nested"
},
files: {
"dist/css/app.css": "src/scss/app.scss"
}
}
},
watch: {
options: {
livereload: true
},
grunt: {
files: ["Gruntfile.coffee"]
},
sass: {
files: "src/scss/app.scss",
tasks: ["sass"]
}
}
});
grunt.loadNpmTasks("grunt-sass");
grunt.loadNpmTasks("grunt-contrib-watch");
grunt.registerTask("build", ["sass"]);
grunt.registerTask("default", ["build", "watch"]);
};


Related Topics



Leave a reply



Submit