How to refresh css when sass compiles - sass

Up to now I have used codekit to compile sass also it has the auto reload feature. Now because I wanted to take advantage of sourcemaps with sass, I needed to use the terminal instead of codekit to compile sass
sass --watch --sourcemap --compass sass:stylesheets
This is because codekit does not support sourcemaps. Is there any app of script I could use to auto reload the browser when sass compiles?
Thanks

Related

How to work with SASS in different project?

While I was learning SASS, I have learned how to install SASS and dev-dependencies using npm package.
Now I want to work on my own project, so how should I work with SASS ?
Do I have to install SASS again ?
If not then how to use existing sass in my project and also the other dependencies like concatenation, auto pre-fixer. Especially when they are updated.

How to use compass mixins in a project using Sass

ColorZilla's gradient editor says
// needs latest Compass, add '#import "compass"' to your scss
Well I've found that's not so easy. Obviously if you just throw #import "compass"; at the top of your .scss file, Sass won't compile because _compass.scss can't be found.
This is an asp.net project utilizing Sass. In addition, I have to use the sass ruby gem to compile, not compass's compiler.
I've installed the compass gem. I've followed the instructions on http://compass-style.org/install/. I've run compass init, compass create, compass install. None of them even give me compass's mixins.
I expected this to work like bourbon, though I know this isn't compass's primary goal.
What am I missing?
Install the library
bower install compass-sass-mixins
Import the compass into your SASS file
#import "bower_components/compass-sass-mixins/lib/compass"
Checkout SASS function list:
https://github.com/askucher/compass-sass-mixins

Sass compile compressed in CLI

sass input.scss:output.css
works well on my server, but the output is uncompressed.
Can I pass arguments to compress the css like the following?
sass input.scss:output.css =compressed
or sass input.scss:output.css minified
?
watch
is not supported on my server and there is no option to get it to work.
Instead, I have to manually compile the sass via the CLI statement on line 1 of this post
Thank you in advance!
You should be able to use the standard Ruby-style flags. Try this:
sass input.scss:output.css --style compressed

Sass lint task in Gulp - Code quality

I recently moved to Sass in a side project with Gulp. I'm used to LESS development and I'm finding hard to find some tools:
I want to keep a minimum code quality watcher in my project since we are more than one developer writting Sass (not only a linter for syntax errors)
I used to do it with recess for LESS >
https://github.com/twitter/recess
Or in Grunt, a quality code linter for Sass (grunt-scss-lint) >
https://github.com/ahmednuaman/grunt-scss-lint
What I'm trying to do is to set some quality code options like: maximum nesting depth, noIds, using dashes for classes...etc.
Is there any tool in Gulp for code linting?
There was no resources for linting SCSS in gulp yet so, with the help of my colleague Juanfran, we can finally lint our sass code with this gulp-scss-linter
Gulp plugin to validate .scss files with scss-lint
You can use Gulp Sass Lint npm package.
You can also use Sass Lint Auto Fix npm package with the above package which will fixes lint errors.

Force Compass to use .sass syntax?

Is there a way to force Compass to use the Sass syntax instead of SCSS?
For new projects, run:
compass create path/to/project --syntax sass
to generate .sass files using Sass syntax inside the sass folder. The --syntax option and others are listed when you run compass --help.
For existing projects, add the following to your Compass config.rb:
preferred_syntax = :sass
That's covered in the Compass configuration reference. And you'll want to run your existing SCSS files through sass-convert to generate new ones which use Sass syntax.

Resources