Compass & SASS
The Future of Stylesheet
Agenda
- What is SASS?
- Why SASS?
- .scss vs. .sass
- Installation
- Writing SASS
- Q & A
- Feedback
SASS?
Syntactically awesome stylesheets.
SASS extends css3 with variables, math, mixins & more. But at its core, SASS is a layer of smilarity between designer and the stylesheets.
Why SASS?
CSS is a declarative langauge made of selectors, properties, values and schemes for priority and inheritance, defining how styles apply.
Problems:
- Repetition cause maintenance challenges.
- Relationships are not clear
- Time Taking
How SASS helps
- Less code
- Easier to read
- Easier to write
- Easier to maintain code
- Plugins ( images sprites etc...)
Disadvantages
- The whole team has to know how SASS works
- Easier if you use SCSS vs SASS
- Cannot edit live on server.
SCSS vs. SASS
SASS is older version and SCSS is newer version.
SCSS is much easier to understand, write and follow CSS coding format.
Installation
- Your machine should be installed Ruby
After run following commands on ruby command prompt:
> gem update --system
> gem install sass
> gem install compass
Writing SASS
- Creating Project
- Nesting Rules
- Variables
- @Extend
- Mixins
- Importing
- Math Operators
- Loop & Conditions
- Custom function
Creating Project
> compass create <myprojectname>
> compass compile
> compass watch
Nesting Rules
Nesting Symbol Selectors
Parent Selector
& references a rules parent selectors
Variables
- Colors, numbers or text
- understand units (em, px, %)
- $variable: value
- No unnecessary repetition, low maintenance
- The variables makes relationship clear
@extend
Mixins
Default and named arguments
Importing
combine SASS with @import
Math Operators
- Math operators (+, -, *, /, %) work with numbers.
> 1em + 1em //2em
> 1em - 1em //0em
> 6px * 4 //24px
> 18 % 5 //3
Number Functions:
> percentage(13/25) //52%
> round(2.4) //2
> ceil & more...
Loop & Conditions
- Logic operators (<, >, <=, >=, ==, !=)
- @if, @else, @else if
- and, or
Conditional Theming
For loop
Each loop
Custom functions
Q & A
Feedback
mukesh.yadav@yatra.com
#mukeshyadav
git: mukeshyadav
What's Next?
more on COMPASS and their utilities.
soooooooooooooon.........
SASS
By Mukesh Yadav
