Syntactically Awesome Stylesheets(Awesome Rules of CSS Language)

What is Sass?

Sass stand for Syntactically Awesome Stylesheets.Sass is a pre-processor and pre-processor is a program which used to change one type of data into another type of data.Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.

" Its save our time."

Dependency to Install SASS◦Ruby◦Nodejs◦Git

How to Install Sass?

There are a couple of ways to start using Sass:1. Application (Third party apps)2. Command line

1. Application (Third party apps) There are good many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux.

◦Codekit (Paid)◦Compass.app (Paid, Open Source)◦LiveReload (Paid, Open Source)◦Koala (Open Source)◦Scout (Open Source)◦Prepros (Paid)

‘’ Koala and Scout are Open Source Applications. ’’

2. Command lineWindows Dependencies

Before you start using Sass you will need to install Ruby. The fastest way to get Ruby on your Windows computer is to use Ruby Installer . Install Ruby’s latest version

Different Ways To Install

Now, There are a couple of ways to install SASS on your system and manage it -: 1) Install with Compass (http://compass-style.org/)2) Install with Bower (http://bower.io)

How to install SASS with Compass

Installing RubyStep 1 : Go to the Ruby Installer for Windows website and download the latest Ruby version – usually the first file at the top of the list (Ruby 1.9.3)

Step 2 : Open the file, choose your language, accept the license agreement, nothing special.On the next screen check the second box – Add Ruby executables to your PATH (this is important). Click Next and finalize your installation.

Step 3 : Open the Command Prompt.Step 4 : Here you can check if everything is okay with your Ruby installation and

ruby version. Type in : ruby –v

Installing SASSStep 5 : It is time to install your preprocessor now. Go back to the Command Prompt window and type in : gem install sass

Step 6 : Check if the SASS installation is working. Type in : sass –v

You should see a line starting your SASS version.

What is Compass?Compass helps Sass authors write smarter stylesheets and empowers a community of designers and developers to create and share powerful frameworks. Put simply, Compass is a Sass framework, designed to make the work of styling the web smooth and efficient. Much like Rails as a web application framework for Ruby, Compass is a collection of helpful tools and battle-tested best practices for Sass.

Installing CompassStep 7 : Installing Compass is a lot like installing SASSIn your Command Prompt window Type in :gem install compassand wait a bit again.

Step 7 : Check if the Compass installation is working. Type in compass –v

Installing Bootstrap-SassTo install bootstrap sass first run the following command in cmd : gem install bootstrap-sass

And now,Compass install bootstrap –r bootstrap-sass

If you want to create a new compass project with bootstrap-sass than use the following command : Compass create YourProjectName -r bootstrap-sass - -using bootstrap

NoteIf sass is not install with the help of above steps, then use ->

Open cmd then write 

->gem source -a http://rubygems.org->gem install sass->sass –v->gem install compass (using to install Compass)

Summery

In this way you can create a sass project with compass.

Installing Sass Using Bower (A Package Manager for the web)

What is Bower?Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files.Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies.

Dependency to Install Bower

◦Node◦npm◦git

How to install SASS with Bower

Installing NodeStep 1 : Go to the https://nodejs.org/en/download/ website and download the latest Node version – usually the first file at the top of the list (Node v6.9.2)

Step 2 : Open the file, choose your language, accept the license agreement, nothing special.On the next screen check the second box – Add Node executables to your PATH (this is important). Click Next and finalize your installation.

Step 3 : Open the Command Prompt. Step 4 : Here you can check if everything is okay with your Node installation and node version. Type in : node -v npm -v

  

Step 5 : Now Download Git (https://git-scm.com/download/win)

Step 6 : Open Git Bash (its use in case of Bower).Install, bower Type in: $ npm install –g bower

Step 7 : Create the folder and locate the folder path , Then, search the packages by (bower.io)Step 8 : Open git bash Step 9 : Type : $ bower install bootstrap-sass (Enter) $ bower install jquery (Enter) And many more....

Useful Links◦http://sass-lang.com/◦http://www.sassmeister.com/◦https://bower.io/◦http://getbootstrap.com/css/#sass◦https://www.sitepoint.com/sass-basics-the-mixin-directive/◦https://www.sitepoint.com/tag/sass-basics/◦https://www.sitepoint.com/tag/sassbasics/◦https://bower.io/◦http://thesassway.com/beginner/getting-started-with-sass-and-compass◦http://foundation.zurb.com/sites/docs/v/5.5.3/sass.html◦http://www.hongkiat.com/blog/bootstrap-and-sass/

Next Presentation We will explain more about the SassCreating some useful examples with the help of Sass.