This presentation is about SASS, a preprocessor for CSS.

1. CSS with SUPERPOWERS
Presented By: Kanchha Kaji Prajapati (creativekaji.com)

2. Kanchha Kaji Prajapati (creativekaji)
Facebook: www.facebook.com/creativekaji
Twitter: www.twitter.com/creativekaji
Email: creativekaji@gmail.com
Website: Creativekaji.com

3. OUTLINE
2. What is SASS?
3. Why use SAAS?
4. Features
5. Setup
6. Practical

4. CSS hopefully
needs no introduction

5. Who has heard of SASS?

6. Who has used SASS?

7. INTRO to SASS

8. WHAT IS SASS?
• Syntactically Awesome Stylesheets –
• - Developed in 2007 by Hampton Catlin
• Preprocessor for CSS
• Every valid CSS stylesheet is valid SCSS
• Commonly used in Ruby on Rails applications but can be used
in any web project.

9. WHY USE SASS?
• Allow writing clean CSS in a programming construct
instead of static rules
• Reduce repetition with CSS
• Create more manageable, reusable, compact stylesheets
• Faster development time
• Programmatic CSS features

10. SASS & SCSS
$text-color: #444
$text-size: 15px
$link-color: #111
#selector
color: $text-color
font-size: $text-color
a
color: $link-color
2 FORMATTING CONVENTIONS
$text-color: #444;
$text-size: 15px;
$link-color: #111;
#selector {
color: $text-color;
font-size: $text-color;
a {
color: $link-color;
}
}
SASS SCSS

11. SASS has 5 primary features
1. Variables
2. Nesting
3. Mixin
4. Partials
5. Extent/Inheritance

12. You can test out SASS during this
presentation!
http://www.sassmeister.com/
http://www.codepen.io

13. 1. Variables
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}

14. 2. Nesting
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

15. 3. Mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }

16. 4. Partial
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-
serif;
background-color: #efefef;
}

17. 5. Extend/Inheritance
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}

18. More…
+, -, *, /, and %
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
OPERATORES

19. More…
COLOR FUNCTIONS
$primary-color : #0000;
h1{
background-color:lighten($primary-color, 50%);
}
other color functions
darken, saturate, rgba etc
For more:
http://sass-lang.com/documentation/Sass/Script/Functions.html

20. More…
COLOR FUNCTIONS
$primary-color : #0000;
h1{
background-color:lighten($primary-color, 50%);
}
other color functions
darken, saturate, rgba etc
For more:
http://sass-lang.com/documentation/Sass/Script/Functions.html

22. INSTALLATION

23. Using Rubynrails
1) Download from http://railsinstaller.org/en
2) Install Sass
--------------------------
gem install sass
sass version check : sass -v
3)Install compass
--------------------------
gem install compass
Create a test project
------------------------
compass create sass-test
Compile Sass to CSS
------------------------
compass watch

24. Important Links
--------------------------------------------------------
1)http://thesassway.com/beginner/getting-started-with-sass-and-compass
2)http://thesassway.com/beginner/how-to-structure-a-sass-project
3)http://sass-lang.com/guide

25. THANK YOU ☺
ANY QUESTION?