1. SASS
(Syntactically Awesome StyleSheets)
SCSS
(Sassy CSS)

2. Agenda
 What is SASS?
 Why use SASS?
 Install
 Syntax
 Features

3. What is Sass?
Sass stands for Syntactically Awesome Stylesheets and was created by
Hampton Catlin. It is a CSS pre-processor which helps to reduce repetition with
CSS and saves time.
Sass introduces new concepts like variables, mixins, and nesting into the CSS
code . These concepts ultimately make your CSS awesome, easier to write and
more dynamic.
• Sass = Syntactically awesome style sheets
• Scss = Sassy CSS
• .sass is older
• .scss is newer, main syntax

4. Why use SASS?
• Developers turning to toolkits
• Create more manageable, reusable, compact style sheets
• Faster development time
• Saves from monotony
• More time for creativity and back-end development
• Programmatic CSS features

5. Install
Before we start using SASS, we need to setup any one of the below tools.
1. Ruby
2. A GUI app such as Hammer, CodeKit, Koala or Compass
3. Gulp

6. SASS with Ruby
• First we will need to install Ruby Installer. It's a single-click installer that
will get everything set up for you super fast.
• Install Sass. Ruby uses Gems to manage its various packages of code
like Sass. In your open terminal window type: gem install sass
To run Sass from the command line, just use
sass myfile.scss myfile.css
• You can also tell Sass to watch the file and update the CSS every time
the Sass file changes:
sass --watch test.scss:test.css
If you have a directory with many Sass files, you can also tell Sass to watch
the entire directory:
sass --watch app/sass:public/stylesheets

7. SASS with Koala
Koala is a GUI application for
Less, Sass, Compass and
CoffeeScript compilation, to help
web developers to use them
more efficiently. Koala can run in
windows, linux and mac.
To Install and uses, please
follow with http://koala-app.com/

8. SASS with Gulp
1. We will need to install 'gulp' and 'gulp-sass' by using NPM(NodeJs Package
Manager)
npm install gulp --save-dev
npm install gulp-sass --save-dev
2. We will create the gulpfile.js with the following code
var gulp = require('gulp');
var scss = require('gulp-sass');
// Compile Sass
gulp.task('scss', function(){
return gulp.src('scss/*.scss')
.pipe(scss())
.pipe(gulp.dest('css'));
});
// Watch Files For Changes
gulp.task('watch', function(){
gulp.watch('scss/*.scss',['scss']);
});

9. Syntax
• Indented syntax (.SASS)
– Much different from traditional CSS syntax
– No curly braces or semi colons
– More strict
• Sassy CSS (.SCSS)
– Superset of CSS
– If you know css, already writing in SCSS
– Easier to work with existing CSS

10. Syntax
SASS SCSS CSS
$black: #000
#container
width:960px
margin: 0 auto
p
color:$black
$black: #000000;
#container {
width:960px;
margin:0 auto;
p {
color
:$black;
}
}
#container {
width:960px;
margin:0 auto;
}
#container p {
color: black;
}

11. Conversion
• Files can be automatically converted from one syntax to another by using the
sass-convert command:
• # Convert Sass to SCSS
$ sass-convert style.sass style.scss
• # Convert SCSS to Sass
$ sass-convert style.scss style.sass

12. Features
• Variables ($) : Creation and use of recallable information.
• Mixins (@mixin) : Writing reusable styles mixed with optional arguments.
• Extend/Inheritance (@extend) : Easily manage CSS class reuse and
inheritance in the stylesheet, rather than HTML.
• Operations (+, -, *, / and %) : Perform arithmetic and color alterations directly
to stylesheet values.
• Control Directives (@if, @for, @each, @while) : A primer on the
programmatic tools in Sass, including functions and each loops.

13. - Bala