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