1

Why use SASS?

Time for a CSS compiler has come!

2

Table of contents• CSS cons and pros• SASS brings the powers to CSS• Demos• FAQs• References• Q/A

3

CSS cons and pros• The advantages of using CSS include:

1. More precise formatting2. Separation of HTML content from appearance3. Saves time, easier site maintenance4. Web accessibility

• Some disadvantages to using CSS:1. Inconsistent browser support2. Not for long term use3. Hard expandability4. Making changes is not easy

4

THE DRY PRINCIPLEEvery piece of knowledge must have a single, unambiguous,

authoritative representation within a system.

Repeat code is everywhere(color, font family, padding…)

What happen if client want to change to a new font family or a

new color?

5

Powers of SASSCSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can

help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that

make writing CSS fun again.

Variables

Nesting

Mixins

Partials/Import

Inheritance

Operators

Functions

Controls

6

VariablesThink of variables as a way to store information that you

want to reuse throughout your stylesheet

Client wants to change font across

the site

Change the value only in one place and the other

updates accordingly

7

NestingSass will let you nest your CSS selectors in a way that follows the same

visual hierarchy of your HTML

HTML SCSS CSS

You don’t need to repeat the parent element each time you code style for a child element. Nesting brings to you a visual view of your

stylesheet, it means more control…

8

Partials/ImportPartial Sass file(file named with a leading underscore) that contain little snippets of CSS modularize your CSS and help keep things

easier to maintain.Sass partials are used with the @import directive

_variables.scss

_mixin.scss

main.scss

9

Mixins A mixin lets you make groups of CSS declarations that you want to

reuse throughout your site. You can even pass in values to make your mixin more flexible. 

Mixin Call mixin with a varibale

CSS output

They do look a lot like functions of course. But

since Sass actually has real functions in the language it’s probably best to dispel

this notion. 

10

Extend/InheritanceUsing @extend lets you share a set of CSS properties from one

selector to another. It helps keep your Sass very DRY.

.btn works as core button

.btn—blue and .btn-shadow inherits from .btn and adds

its own properties

11

OperatorsSassScript supports the standard arithmetic operations on numbers

(addition +, subtraction -, multiplication *, division /, and modulo %), and will automatically convert between units if it can

Numeric operations

compile to

12

Operators(cont)All arithmetic operations are supported for color values, where they

work piecewise

Color operations

13

Operators(cont)The + operation can be used to concatenate strings

String operations

use with variable

14

ControlsSassScript supports basic control directives for including styles only under some conditions or including the same style several times with

variations

@if ,@else if and @else

@while @for @each

Demo

15

FunctionA function is very similar to a mixin, however function always return a

value

MixinFunctio

n

Functions help you write more readable and DRY Sass by letting you move your reusable logic out of specific declarations and

even out of your mixins

16

CompassAs if SASS isn't awesome enough on it's own, Compass comes

with an extra set of awesomeness. 

17

FAQs? Do I need to know Ruby or advanced command-

line?? Will I need to completely change the way I’ve

been writing stylesheets? ? Will the CSS it outputs be bloated and

unreadable?

The answer is nope

18

Demos

19

References• Articles:

o Why Sass?o Using pure Sass functions to make reusable logic more usefulo Using SASS or SCSS?o Mistakes when using SASSo Perspective of a Preprocessoro Why SASS and Compass should be in your workflow?

• Web documents:o Sass Basicso Sass Documentation

• Web archives:o CSS Weekly

20

Thank you for your attention!