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

1
Table of contents
•
•
•
•
•
•

CSS cons and pros
SASS brings the powers to CSS
Demos
FAQs
References
Q/A

2
CSS cons and pros
• The advantages of using CSS include:
1.
2.
3.
4.

More precise formatting
Separation of HTML content f...
THE DRY PRINCIPLE
Every piece of knowledge must have a single, unambiguous, authoritative
representation within a system.
...
Powers of SASS
CSS on its own can be fun, but stylesheets are getting larger, more
complex, and harder to maintain. This i...
Variables
Think of variables as a way to store information that you want to
reuse throughout your stylesheet

Client wants...
Nesting
Sass will let you nest your CSS selectors in a way that follows the same visual
hierarchy of your HTML
HTML

SCSS
...
Partials/Import
Partial Sass file(file named with a leading underscore) that contain little
snippets of CSS modularize you...
Mixins
A mixin lets you make groups of CSS declarations that you want to reuse
throughout your site. You can even pass in ...
Extend/Inheritance
Using @extend lets you share a set of CSS properties from one selector to
another. It helps keep your S...
Operators
SassScript supports the standard arithmetic operations on numbers
(addition +, subtraction -, multiplication *, ...
Operators(cont)
All arithmetic operations are supported for color values, where they work
piecewise
Color operations

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

use with variable

13
Controls
SassScript supports basic control directives for including styles only under some
conditions or including the sam...
Function
A function is very similar to a mixin, however function always return a value
Mixin

Function

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

16
FAQs
? Do I need to know Ruby or advanced commandline?
? Will I need to completely change the way I’ve been
writing styles...
Demos

18
References
• Articles:
o
o
o
o
o
o

Why Sass?
Using pure Sass functions to make reusable logic more useful
Using SASS or S...
Thank you for your
attention!

20
Upcoming SlideShare
Loading in...5
×

Why should you use SASS in your project?

396

Published on

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 ^^

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
396
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Why should you use SASS in your project?

  1. 1. Why use SASS? Time for a CSS compiler has come! 1
  2. 2. Table of contents • • • • • • CSS cons and pros SASS brings the powers to CSS Demos FAQs References Q/A 2
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12. Operators(cont) All arithmetic operations are supported for color values, where they work piecewise Color operations 12
  13. 13. Operators(cont) The + operation can be used to concatenate strings String operations use with variable 13
  14. 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. 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. 16. Compass As if SASS isn't awesome enough on it's own, Compass comes with an extra set of awesomeness. 16
  17. 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. 18. Demos 18
  19. 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. 20. Thank you for your attention! 20
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×