Recommended
More Related Content
What's hot
What's hot (20)
Similar to Authoring Stylesheets with Sass and Compass
Similar to Authoring Stylesheets with Sass and Compass (20)
More from chriseppstein
Recently uploaded
Recently uploaded (20)
Authoring Stylesheets with Sass and Compass
- 1. AUTHORING STYLESHEETS PROJECT WITH SASS AND COMPASS DATE CLIENT 7/28/2010 CSS SUMMIT
- 2. You’re there for them. We’re here for you. CHRIS EPPSTEIN FOLLOW ME ON TWITTER: SOFTWARE ARCHITECT FOR CARING.COM @CHRISEPPSTEIN
- 3. HOLD ON TO YOUR HAT WE’VE GOT A LOT TO LEARN. CSS HAS GROWN UP.
- 4. Today Learn the Sass Syntax and features Learn your way around a compass project Overview of Compass Libraries Style a webpage in minutes Discover a new way of thinking about design
- 5. CSS3 33 New Selectors 120+ New Properties 3 New @-rules Enhanced Media Queries
- 6. CSS3 More Sophisticated More Powerful More Complex NO NEW FEATURES TO MANAGE COMPLEXITY.
- 7. Sass & Compass A workhorse for CSS developers. SIMPLIFYING CSS USING ABSTRACTIONS.
- 8. WHAT IS SASS? WHAT IS COMPASS?
- 9. Sass Features Variables Conditionals Nested Rules Server-side Imports Mixins Output Formatting & Compression Selector Inheritance Silent Comments Colors Optional Whitespace- Math Aware Syntax
- 10. Sass Syntax SASS CSS
- 11. Sass: Variables SASS CSS
- 12. Sass: Nested Rules SASS CSS
- 13. Sass: Mixins SASS CSS
- 14. Mixins: Write Your Own
- 15. Sass: Selector Inheritance SASS CSS
- 16. Sass: Colors SASS CSS
- 17. Sass: Colors Hex FUNCTIONS mix rgb/rgba darken/lighten hsl/hsla transparentize/opacify Named Colors compliment/adjust-hue Alpha Layers saturate/desaturate/ grayscale accessors & more HTTP://SASS-LANG.COM/DOCS/YARDOC/SASS/SCRIPT/FUNCTIONS.HTML
- 18. Sass: Mathematical Expressions SASS CSS
- 19. Sass: Numeric Units Handles any unit (even EXAMPLES those not yet defined in CSS) allows complex units in intermediate forms Understands compatible units
- 21. Sass: Server Side Imports _sidebar.scss screen.scss screen.css
- 22. Sass: Output Formats COMPACT COMPRESSED NESTED EXPANDED
- 25. QUESTIONS ABOUT SASS? LET’S CLEAR THOSE UP BEFORE WE GO ANY FURTHER DOWN THE RABBIT HOLE.
- 26. OOCSS CSS IS 14 YEARS OLD WE’VE DEVELOPED SOME BEST PRACTICES
- 27. OOCSS CSS FRAMEWORKS A CODIFICATION OF BEST PRACTICES
- 28. NOT FRAMEWORKS OOCSS COMPASS A REAL STYLESHEET FRAMEWORK
- 29. Features • Project Context • Core Library • Semantic Frameworks • Extensions • Community COMPASS A STYLESHEET AUTHORING FRAMEWORK
- 30. WINDOWS USERS: COMPASS WORKS FOR YOU TOO! DON’T BE SCARED WE’RE GOING TO USE THE TERMINAL
- 31. compass create <project> --using <framework> PROJECT CONTEXT CREATE A NEW PROJECT IN SECONDS
- 32. compass watch PROJECT CONTEXT COMPASS WILL WATCH FOR CHANGES AND COMPILE AUTOMATICALLY
- 33. compass help IF YOU NEED HELP SELF DOCUMENTING
- 34. IF YOU NEED HELP ONLINE DOCUMENTATION
- 35. http://groups.google.com/group/compass-users http://groups.google.com/group/haml IF YOU NEED HELP THE COMMUNITY
- 36. Projects are more than just Stylesheets Images Fonts JavaScripts
- 37. Where are your Assets? assets.scss
- 38. Relative Assets: config.rb No Web Server Required assets.scss assets.css
- 39. Absolute Assets: Web Server Required config.rb assets.scss assets.css
- 40. Set an Application config.rb Path Context assets.scss assets.css
- 41. Image Host (CDN/S3/etc) config.rb assets.scss assets.css
- 42. Use Asset Hosts config.rb assets.scss assets.css
- 43. In your CSS?! WIKIPEDIA REFERENCE COMPASS DOCUMENTATION
- 44. Asset Helpers stylesheet-url - url to assets stored in the CSS directory font-url - url to assets in the font directory image-url - url to assets in the images directory inline-image - embed an image inline-font-files - embed a font file http://compass-style.org/docs/reference/compass/helpers/urls/
- 45. CSS3 You’re going to hear a lot about CSS3 today. It’s pretty cool. But: It’s a #$%^@ mess. Vendor prefix hell Incompatible syntaxes Graceful degradation / progressive enhancement considerations Buggy implementations
- 46. Prefix Hell SIMPLE. LIKE IT WILL BE. ONLY NOW. REALLY? WHO DOES THIS? WHAT A PAIN.
- 48. Compass CSS3 Modules UPDATED FOR YOU AS BROWSERS DEVELOP Background Clip Font Face Background Origin Gradient Background Size Inline Block Border Radius Opacity Box Text Shadow Box Shadow Transform Box Sizing Transition Columns http://compass-style.org/docs/reference/compass/css3/
- 49. Compass Utilities Resets Lists: pretty bullets, no-bullets, horizontal Sticky Footer lists, inline lists Clearfix Sprites Cross browser best Tables: striping practices: floats, mins borders & basic styling Links: hover-link, link- Text: ellipsis, no-wrap, colors, unstyled-link text-replacement http://compass-style.org/docs/reference/compass/utilities/
- 50. Mixin Library A La Carte Customizable
- 51. Browser Support All Modern Browsers Firefox 2 IE6 & 7 Exceptions are noted in the docs. Compass ♥’s progressive enhancement
- 52. The Zen of Sass ‣ Beautiful Markup ‣ Stylesheets that you can visualize ‣ Keep presentation in your stylesheets. ‣ Find your own code style ‣ Build your own framework ‣ Don’t use what you don’t like
- 53. Susy Created by an Eric Meyer for Compass Uses Natalie Down’s CSS Systems approach to grids. Can be elastic, fixed, or fluid. Vertical Rhythm Utilities http://susy.oddbird.net/
- 54. Some Great Extensions Lemonade - Sprite Generator 960.gs - The 960 grid system ported to Sass Lightboxes - Pure CSS lightboxes Slideshows - Pure CSS slideshows Fancy Buttons - Pure CSS Button Generator BUILDING AN EXTENSION IS EASY!
- 56. My Teammates Nathan Wiezenbaum (@nex3) - Sass & Haml Eric Meyer (@eriiicam) - Compass, Susy Brandon Mathis (@imathis) - Compass, Fancy Buttons
- 57. Compass is Charityware If you use Compass & Sass and they make your life better, please help make someone else’s life better by making a tax-deductible donation to the United Mitochondrial Disease Foundation. http://umdf.org/compass
- 58. Photo Credits http://www.flickr.com/photos/oly_paul/3989018045/ http://www.flickr.com/photos/empics/2846078511/ http://www.flickr.com/photos/7202153@N03/3361299763/ http://www.flickr.com/photos/euart/282104427/
- 59. Similar Projects Less (Ruby, Javascript) CSScaffold (PHP) Turbine (PHP) xCSS (PHP) CleverCSS (Python) Mechanical CSS (PHP) HSS (Neko)
Editor's Notes
- * 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)
- 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&#x2019;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&#x2019;re all about the browser -- None of them address how we author stylesheets.
- * 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.
- Example of Sass in action. &#x201C;I thought Sass was supposed to make my stylesheets smaller?&#x201D; Sass excels at making implicit relationships explicit -- smaller is not the goal: easier to maintain is the goal. Often this results in a smaller file.
- Global: $background-color, $foreground-color, $widget-width Scoped: $border-width
- * Later today, you&#x2019;ll hear from Nicole Sullivan, creator of OOCSS. * The idea of class inheritance came from her. * Nathan and I generalized it to selector inheritance and created the first complete implementation. * I think that Sass is a great compliment to the OOCSS framework.
- * Write colors how you think of them * operate on colors in the hsl domain * build themes from just a few base colors * keep color relationships explicit
- * Create mathematical expressions to simplify change.
- There are other control flow directives like @for, @while but these have only marginal usefulness.
- partials start with an underscore but the imports do not require the underscore. this facilitates converting to a partial. partials do not generate css files imports place the contents of the imported file at the point of import. imports make the mixins and global variables of the imports file available.
- 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&#x2019;s easier to make a new term than convince everyone to start calling them &#x201C;css libraries&#x201D;.
- So Compass is a &#x201C;Stylesheet Authoring Framework&#x201D; Or for the geeks: A Meta Framework (A framework for css frameworks -- we&#x2019;ll get to this later)
- You might want to drag this to your dock Someday there will be a GUI. But until then, this really isn&#x2019;t very hard to do.
- * 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 &#x201C;relative_assets = true&#x201D; and you&#x2019;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 &#x201C;relative_assets = true&#x201D; and you&#x2019;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&#x2019;t work in IE6 & IE7
- This is how the sausage is made. It&#x2019;s not pretty but the finished product tastes pretty good. Compass is your CSS sausage factory. But here&#x2019;s the thing...
- Ok, most of what&#x2019;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.