How to starting using Compass.app to compile sass automatically

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

1. Firstly download from this page – compass.app.
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 – compass.app.

4. I have created my project with name – sass_project. Then compass.app 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;
}

SELAMAT MENCUBA !

 

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 https://rubgems.org/

Solution:
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 Compass.app to compile sass automatically.