This is about sass

1. Welcome to the technical session
on
Syntactically Awesome Style sheets

2. • Introduction to Sass
― Why adding Sass in our workflow
― History of SASS
• Objectives
― How to convert our CSS into Sass
• Compass
― What is Compass
― How to use sass with compass
• Example
― Example of Sass Project
OBJECTIVES

3. History of Sass
• Hampton Catlin
• Weizenbaum and Chris Eppstein
• 2008 nov 28
What is of Advantages of Scss ?

4. Sass Pre-processor
.Sass or .Scss { } ; Coffee Script & Haml
• Others are less and stylus
• Where to write Sass code ?

5. .sass & .scss examples
style. Scss style. Sass
$main: #444;
.btn
color: $main
display: block
.btn-a
color: lighten($main, 30%)
&:hover
color: lighten($main, 40%)
$main: #444;
.btn {
color: $main;
display: block;
}
.btn-a {
color:
lighten($main, 30%);
&:hover {
color:
lighten($main, 40%);
}
}
style.css
.btn {
color: #444;
display: block;
}
.btn-a {
color: #919191;
}
.btn-a:hover {
color: #aaaaaa;
}

6. Sass features
• Variable
• Importing
• Nesting Selectors
• Mixin
• Interpolation
• Minify(size reducing)
• Inheritance(extends)
• Math + Color
• Conditions(if , loop)
• and more ...

7. Sass Installation
• Command lines
-Need to install Ruby(gem install sass)
-check Sass installation (sass –v)
• Applications
-CodeKit , Hammer, Mixture (Paid)
-Compass, LiveReload, Prepros (Paid, Open Source)
-Koala, Scout (Open Source)
• Compile & Watch
-C:xampphtdocssasspractisesass>sass -w main.scss:../css/style.css
-C:xampphtdocssasspractisesass>sass -w main.scss:../css/style.css --style compressed

8. Sass folder creation(@import use)
Sass create itself
!important
_filename

9. Sass Commenting

10. Sass Nesting

11. • Variable Scope(important)
Sass Variable

12. @mixin border-radius($radius: 10px) {
border-radius: $radius;
}
Sass Mixin with argument

13. Sass Inheritance(with @extend keyword)

14. Sass Placeholder(%) & Functions(@)
• %placeholdername{ }
• Can be extended, but never become a selector of their own
Functions
• @functionname($argument){
• Properties of any selector(id, class)
• }

15. Sass Placeholder

16. Functions(@)

17. Interpolation

18. Loop(iterator)

19. Minify

20. Let’s Happy Sass Life
Any Questions
on how to write maintainable css by
using sass?