How to starting using to compile sass automatically

Good Day , Salam sejahtera( malay), Nama brita nuan (iban), Anih agah amu (bidayuh)!  ( Greeting sentence)

How to starting using to compile sass automatically :

  1. Firstly download from this page –
  2. After done download,  Run Compass-app.exe. You’ll see the gray icon on your windows bars.
  3. First Create your sass project , by right click on gray icon –


4. I have created my project with name – sass_project. Then will load a report.


5. What the good about this software is , you can set your sass project with its config file.


Selamat Mencuba!!


SASS – Syntactically Awesome Stylesheets – CSS

1.) What is SAAS?

  • i. SASS – Stands for Syntactically Awesome Sytlesheet – created by Hampton Catlin.
  • ii. Concepts of SASS that add in CSS code :
    • a) variables
    • b) mixins
    • c) Resting
  • iii. SASS using the .SCSS and .SASS extension for SAAS File.
  • iv. For SASS – Syntax there’s no Semi-colons or brackets inside File .SCSS.

2.) How to start to Use SAAS?

  • 2.1.) To using SAAS, firstly Start Install Ruby  for compose it.
    • 2.1.1)  intallation on Windows.


  • Setup Ruby installation Destination And Optional Tasks.


  • Install sass :

gem install sass

3.) What is Compass?

  • Compass  will take your .sass or .scss source files and compile browser readable CSS for you.

3.1.) Install Compass.

On windows command Prompt : 

gem install compass


4. How to use compass with Basic sass Project?


  • config.rb file is a file to holds all the settings Compass needs to compile the CSS correctly.

5. Watch Compass in your project sass – sass_basic_project\compass :

  • We need to tell Compass to watch our compass folder. Compass will look for any changes to the files in the sass folder of the project. In this case we have a style.scss file.
  • By using terminal cmd – run the compas watch:


6. My file style.css and style.scss is empty.

6.1. Add our first style in sass – style.scss.

@import ‘compass/css3’;

.logo_visa {
background-image: image-url(“cc-visa.png”);
width: image-width(“cc-visa.png”);
height: image-height(“cc-visa.png”);

6.1.1. Instantly Magic come, the file style.css will added automatically with code css.

/* line 3, ../compass/sass/style.scss */
.logo_visa {
background-image: url(‘../images/cc-visa.png?1451549391’);
width: 50px;
height: 30px;



Errors & Solutions:

  1. Why I got errors when run the command install : 

gem install sass

Error:could not find valid gem ‘sasss’ <>=0>, unable to download data

gem install sass –http-proxy=http://<yourproxy>:<port>


2. How to set out project sass without manually run the command and without configure the sass path or css path?

  • GO to this Page How to starting using to compile sass automatically.