Sass in-browser editing using CSS sourcemaps

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Sass 3.3.0alpha version enables in-browser CSS sourcemaps along with Chrome dev tool!

Sass install

My console is in my company intra network which uses proxy server.
Therefore, an extra parameter “–http-proxy” is required to install.

Sass configuration

Go to your project folder and run the following command.

What!? Seems compass is not compatible with this sass version..
Stack Overflow (Sass –compass –watch Error: Cannot load compass)

It says Sass 3.3.0.alpha149 works well with compass 0.12.2. OK, let’s try again.

Then, try again.

Yes!! Once you save the scss file, the console shows this.

Install Chrome Canary

Install Chrome Canary
Then, you will see an expected result!!
Screen Shot 2013-09-09 at 10.29.31 AM

Now the scss file can be editable in browser!!!

Installing Yeoman 1.0

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

Upgrade older version to 1.0

Uninstall existing Yeoman

Install 1.0

If you are using npm before 1.2.10, install bower manually. Check your version with “npm -v”.

Trying generator-mobile

The most exciting feature of 1.0 is mobile testing! The “generator-mobile” enables it.

Error… Same issue is posted in https://github.com/yeoman/generator-mobile/issues/10.
I will update this post as soon as I got the solution..

Yeoman generator-backbone

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

For starting up backbone application, “generator-backbone” for Yeoman is the best way ever!

Install generator

https://github.com/yeoman/generator-backbone#readme

Scaffolding the app

Now you are ready!

Build with Grunt

The app is initially implemented with Grunt which enables you to build your app as the optimised.

Grunt for build

A command “grunt” runs build process where sass compiling, css, js are minified and so on.

There will be a folder called “dist” where all the optimised fils are located!
That is pretty cool!!

Grunt server

A command “grunt server” establishes a server with port :9000 for you to preview the site.
Additionally, this is the best function it provides, it observes the file update, which means once you made a change to one of the files, grunt automatically builds the sources!!!!!