Sass & Compass @ SenchaConf

5,463 views

Published on

Sass & Compass talk at SenchaConf

Published in: Technology
1 Comment
12 Likes
Statistics
Notes
  • How to open the file it just downloads 'sasscompassv2-101116163816-phpapp02.key' the extension of the file is '.key'. Please help me understand, what to do to open the file. Thanx in advance.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,463
On SlideShare
0
From Embeds
0
Number of Embeds
59
Actions
Shares
0
Downloads
138
Comments
1
Likes
12
Embeds 0
No embeds

No notes for slide

  • * graduated from Caltech in 2000
    * 4 startups, F2E, UI Lead, UI Architect, etc
    * First Employee of Caring.com in 5/2007
    * Discovered Sass about 2 years ago when it was already 2 years old, created sass port of blueprint css framework, created compass, joined the Sass core team, Recently joined the blueprint core team (again)






  • Design in code,
    manage change without bleed
  • compass v0.11
    sass 3.1
  • CSS is a major front for the Browser War v2.0
    Casualty of War: Front-End Developers
    What do all of these new features have in common?
    They’re all about the browser -- None of them address how we author stylesheets.

  • CSS is a major front for the Browser War v2.0
    Casualty of War: Front-End Developers
    What do all of these new features have in common? They’re all about the browser -- None of them address how we author stylesheets.

  • CSS is a major front for the Browser War v2.0
    Casualty of War: Front-End Developers
    What do all of these new features have in common? They’re all about the browser -- None of them address how we author stylesheets.


  • Colors, patterns, prefixes
  • * Sass is a stylesheet language - Built on the same primitives as CSS but with more expressiveness.
    * Compass is a framework that uses sass to help you author your stylesheets by providing shared tools, libraries, and standards that help users share stylesheets with each other.
    * Sass and Compass have Co-evolved over the past two years. Sass has existed for about 3.5 years.
















  • Sass knows all color representations























































  • Use .sass instead of .scss
    Completely interoperable
    less noise: curly braces => indentation, ; => newline
    @include => +, @mixin => =

  • * resets
    * grids
    * typography
  • Best practices and patterns that are proven to work across a range of browsers.
  • None of these are frameworks. They are libraries.
    But it’s easier to make a new term than convince everyone to start calling them “css libraries”.

  • So Compass is a “Stylesheet Authoring Framework”

    Or for the geeks: A Meta Framework (A framework for css frameworks -- we’ll get to this later)






  • * By putting the asset locations in a configuration file, you can let compass figure out how to tell the browser where they are. This makes it easier to refactor and still use relative urls when you want to.
    * At any time, you can set “relative_assets = true” and you’ll be able to serve images off the local filesystem irrespective of your other settings.
    timestamps are automatically added to invalidate browser caches when images change. (can be disabled)
  • * By putting the asset locations in a configuration file, you can let compass figure out how to tell the browser where they are. This makes it easier to refactor and still use relative urls when you want to.
    * At any time, you can set “relative_assets = true” and you’ll be able to serve images off the local filesystem irrespective of your other settings.
    timestamps are automatically added to invalidate browser caches when images change. (can be disabled)
  • This is the default, assets will be served root relative, via a web-server without specifying a host.
  • Sometimes you find out your app will be hosted in a folder.
  • a host may be specified by asset type.
  • You can specify the asset host for each asset.

  • Data urls let us embed assets directly in our stylesheets.
    Good for small images like icons where HTTP overhead is large compared to file size.
    Incurs encoding bloat: 33% uncompressed, 2-3% when gzipped,
    Doesn’t work in IE6 & IE7

  • This is how the sausage is made. It’s not pretty but the finished product tastes pretty good. Compass is your CSS sausage factory.

    But here’s the thing...

  • Ok, most of what’s in compass is pretty straightforward. You could have written it yourself if you wanted. But not this. This was hard to do. There are dozens of man hours in this bit.
  • Best practices, Battle tested, Updated regularly to reflect browser advancements. Your code remains the same.





  • Share libraries -- not just snippets on a blog post.





  • ×