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.

intall_2

  • Setup Ruby installation Destination And Optional Tasks.

ruby_installer.jpg

  • 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

ruby_installer_7.jpg

4. How to use compass with Basic sass Project?

saas_basic_project.jpg

  • 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:

ruby_installer_8.jpg

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.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s