Why should you use SASS in your project?


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:

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
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
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