• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
From Good to Great: 5 things you didn't know about Compass and Sass.
 

From Good to Great: 5 things you didn't know about Compass and Sass.

on

  • 4,746 views

From Good to Great: 5 things you didn't know about Compass and Sass.

From Good to Great: 5 things you didn't know about Compass and Sass.

Statistics

Views

Total Views
4,746
Views on SlideShare
4,467
Embed Views
279

Actions

Likes
6
Downloads
41
Comments
0

3 Embeds 279

http://blog.derekperez.com 269
http://andted.tumblr.com 7
http://safe.tumblr.com 3

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

    From Good to Great: 5 things you didn't know about Compass and Sass. From Good to Great: 5 things you didn't know about Compass and Sass. Presentation Transcript

    • From Good
      to Great.
      5 things you didn't know you could do with Sass and Compass
    • Hello.
    • #1: Smater Sprites
      Sass helps you cut down on http requests.
    • Basic Sprite Example
    • Basic Sprite Example
      +1 HTTP Request
    • These can add up.
      Weren't we using sprites to cut down on HTTP requests in the first place?
    • inline-image function
    • inline-image sprite Example
    • inline-image sprite Example
    • inline-image sprite Example
      OH SHI-
    • Over usage of this technique defeats the purpose.
    • #2: Optimize for Some
      Let your traffic patterns help you optimize your compiled css.
    • Chrome
      Firefox
    • Chrome
      KHTML
      Firefox
    • Standard CSS3 mixin
    • Selective CSS3 Mixin
    • WARNING
      This might lead to over-optimization, but still pretty cool.
    • #3: Coloring With Code
      Sass functions that make color picking easier, directly in code.
    • Sass Color Functions
    • Sass Color Functions
    • Sass Color Functions
      color = hex | rgba | firebrick
    • #4: @extend
      Think Class Hierarchy, but for CSS!
    • Standard Mixin Pattern
    • Overweight.
      is this CSS really what you'd do by hand?
    • New @extend Pattern
    • Less redundancy,
      smaller output code.
      This feels more like what you'd write out naturally.
    • Cooler @extend Pattern
    • @extend works with cascade, @include works around it.
      Write classes naturally, let Sass manage selectors.
    • #5: $ sass-convert
      Move you existing stylebase over to Sass, with a simple command.
    • $ sass-convert --help
    • ...or, Just add an "s" to your file.
      .scss
    • Recommendations
      Do NOT do this directly to your codebase. Copy it.
      Check your file extensions.
      Review the changes sass-convert made.
      Try converting to SCSS(!)
    • compass-style.org/docs
    • compass-style.org/docs
      its a beta.
    • compass-style.org/docs
      its a beta.
      You should contribute.
    • Thanks!