Why should you use SASS in your project?
Upcoming SlideShare
Loading in...5
×
 

Why should you use SASS in your project?

on

  • 451 views

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

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

Statistics

Views

Total Views
451
Views on SlideShare
450
Embed Views
1

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 1

http://www.slideee.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Why should you use SASS in your project? Why should you use SASS in your project? Presentation Transcript

  • 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 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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 same style several times with variations @if ,@else if and @else @while @for @each Demo 14
  • 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
  • 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 stylesheets? ? Will the CSS it outputs be bloated and unreadable? The answer is nope 17
  • 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 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
  • Thank you for your attention! 20