My research about SASS and Compass. In this presentation I will tell you why you should use it. You can download my demo file here: http://goo.gl/r3WoCF I like the feedback, so please tell me what you think about this presentation. Every idea is welcome. If you encounter any issues with the demo, tell me too, I will try to help you on the way to love SASS ^^

1. Why use SASS?
Time for a CSS compiler has come!
1

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

3. CSS cons and pros
• The advantages of using CSS include:
1.
2.
3.
4.
More precise formatting
Separation of HTML content from appearance
Saves time, easier site maintenance
Web accessibility
• Some disadvantages to using CSS:
1.
2.
3.
4.
Inconsistent browser support
Not for long term use
Hard expandability
Making changes is not easy
3

4. THE DRY PRINCIPLE
Every 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?
4

5. Powers of SASS
CSS 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
Mixins
Inheritance
Nesting
Partials/Import
Operators
Functions
Controls
5

6. Variables
Think 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
6

7. Nesting
Sass 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…
7

8. Partials/Import
Partial 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
8

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.
9

10. Extend/Inheritance
Using @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
10

11. Operators
SassScript 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
11

12. Operators(cont)
All arithmetic operations are supported for color values, where they work
piecewise
Color operations
12

13. Operators(cont)
The + operation can be used to concatenate strings
String operations
use with variable
13

14. Controls
SassScript 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
14

15. Function
A function is very similar to a mixin, however function always return a value
Mixin
Function
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
15

16. Compass
As if SASS isn't awesome enough on it's own, Compass comes with an
extra set of awesomeness.
16

17. FAQs
? Do I need to know Ruby or advanced commandline?
? 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
17

18. Demos
18

19. References
• Articles:
o
o
o
o
o
o
Why Sass?
Using pure Sass functions to make reusable logic more useful
Using SASS or SCSS?
Mistakes when using SASS
Perspective of a Preprocessor
Why SASS and Compass should be in your workflow?
• Web documents:
o Sass Basics
o Sass Documentation
• Web archives:
o CSS Weekly
19

20. Thank you for your
attention!
20