SlideShare a Scribd company logo
1 of 62
Download to read offline
Thursday, March 19, 2009
Building Unobtrusive Stylesheets
          with Sass & Compass
          For faster development and easier maintenance




Thursday, March 19, 2009
Chris Eppstein
               Web UI Architect for 7 years
               Software Architect for Caring.com for the last 2 years
               Member of the Sass core team
               Creator of Compass, the first Sass framework




Thursday, March 19, 2009
Assumptions

               You know HTML
               You know CSS
               You don’t look forward to the design phase
               You’re tired of reinventing the wheel when you design




Thursday, March 19, 2009
What is an Unobtrusive Stylesheet?



               Makes no requirements on content
               Only affects targeted content




Thursday, March 19, 2009
Why build Unobtrusive Stylesheets?

               Initial implementation is faster
               Changing design is faster
               More flexibility for theming and alternate stylesheets
               Redesigns made easier
               Better SEO




Thursday, March 19, 2009
Being Unobtrusive with CSS is Hard
         You need better tools




Thursday, March 19, 2009
Unobtrusive
         Footer
         without
         Sass &
         Compass

Thursday, March 19, 2009
Unobtrusive
         Footer
         with
         Sass &
         Compass

Thursday, March 19, 2009
Unobtrusive
         Homepage
         without
         Sass &
         Compass

Thursday, March 19, 2009
Unobtrusive
         Homepage
         with
         Sass &
         Compass

Thursday, March 19, 2009
Case Study: Caring.com
         Entire UI Redesign took the team two weeks
         Front-end development times down by ~40%




Thursday, March 19, 2009
What Makes Unobtrusive Hard?

                           Repetitive Selectors
                                  – AND –

                           Copy & Paste Styling



Thursday, March 19, 2009
What Makes Unobtrusive Hard?

                           Repetitive Selectors
                                  – AND –

                           Copy & Paste Styling



Thursday, March 19, 2009
What Makes Unobtrusive Hard?

                           Repetitive Selectors
                                  – AND –

                           Copy & Paste Styling



Thursday, March 19, 2009
Sass Makes Unobtrusive Easy
                           Simple Descendant
                               Selectors
                                 – AND –

                              Abstraction


Thursday, March 19, 2009
Sass Makes Unobtrusive Easy
                           Simple Descendant
                               Selectors
                                 – AND –

                              Abstraction


Thursday, March 19, 2009
Sass Makes Unobtrusive Easy
                           Simple Descendant
                               Selectors
                                 – AND –

                              Abstraction


Thursday, March 19, 2009
Sass Is Whitespace Aware
         Indented selectors are descendant selectors




                                       Not DRY
                       DRY




Thursday, March 19, 2009
Sass is Good at Permutation




                           DRY

                                 Not DRY



Thursday, March 19, 2009
More Sass Syntax




Thursday, March 19, 2009
More Sass Syntax
                           Variables




Thursday, March 19, 2009
More Sass Syntax
                           Variables




Thursday, March 19, 2009
More Sass Syntax
                           Attribute Namespaces




Thursday, March 19, 2009
More Sass Syntax
                           Attribute Namespaces




Thursday, March 19, 2009
More Sass Syntax

                           Mixins




Thursday, March 19, 2009
More Sass Syntax

                           Mixins




Thursday, March 19, 2009
More Sass Syntax

                           Parent References




Thursday, March 19, 2009
More Sass Syntax

                           Parent References




Thursday, March 19, 2009
More Sass Syntax


                           Expressions




Thursday, March 19, 2009
More Sass Syntax


                           Expressions




Thursday, March 19, 2009
More Sass Syntax




        Other Benefits of Compilation:
             Environment-dependent output   SassScript
             formats

             Partials & imports

             Silent comments


Thursday, March 19, 2009
There’s No
         Excuse Now
           Go forth and scope to
           your heart’s content




Thursday, March 19, 2009
A Cute Little Trick
    Ever notice how Haml looks like CSS?




                                           Selectors
                             Delete
            Write Haml                     ready to
                           some stuff        style




                                           Via: Lachlan Hardy

Thursday, March 19, 2009
CSS Lacks Abstraction
         Classes are not for Style Reuse




Thursday, March 19, 2009
You’ve been picking the
         lesser of two evils, right?
               Copy & Paste
               Presentational Class Names




Thursday, March 19, 2009
Sass Mixins are Abstract Classes




                           +




Thursday, March 19, 2009
Sass Mixins are Abstract Classes




                           +




Thursday, March 19, 2009
Sass Mixins are Abstract Classes




                           +




Thursday, March 19, 2009
Sass Mixins are Abstract Classes




                           +




Thursday, March 19, 2009
Sass Mixins are Abstract Classes




                           +




Thursday, March 19, 2009
Sass Mixins are CSS Macros




                           When you need to apply the
                            same styles to different
                                   selectors


Thursday, March 19, 2009
Sass Script is Turing Complete




                               Credit: Nathan Weizenbaum


Thursday, March 19, 2009
Sass Script is Turing Complete




                               Credit: Nathan Weizenbaum


Thursday, March 19, 2009
The Only Limitation is Your
                      Imagination




                                     and CSS...
Thursday, March 19, 2009
Sass is a Language
       Compass is an Ecosystem




Thursday, March 19, 2009
Compass Makes Frameworks Work




Thursday, March 19, 2009
Building Web UIs Can Be Fun Again!




Thursday, March 19, 2009
Compass Provides
               Built-in framework ports: Blueprint, YUI
               Installable plugins: 960.gs
               Core library
               Reset
               Sass compilation for stand-alone projects
               Application framework integration



Thursday, March 19, 2009
Add Compass to your Rails
         Application



         Sass has Merb/Rails integration that
         automatically recompiles stylesheets.




Thursday, March 19, 2009
Where’s the Sass?

               Compass stores its sass files in its gem
               Easy upgrades
               rake gems:unpack GEM=chriseppstein-compass




Thursday, March 19, 2009
Compass’s Blueprint Port
         contains a Layout DSL
                         Configuration Parameters
         +container
         +column(n,last)      !blueprint_grid_columns
         +last
                              !blueprint_grid_width
         +append(n)
                              !blueprint_grid_margin
         +prepend(n)
                         Oh and it does some basic
         +push(n)
                         styling for you if you want that.
         +pull(n)
                               +blueprint-typography
                               +blueprint-form
Thursday, March 19, 2009
Thursday, March 19, 2009
Compass’s YUI Port is
         Configurable & Semantic
               YUI uses class descendants to layout grid blocks -- this
               makes it more complex to abstract and use than
               Blueprint
               Compass lets you configure the sizes, class names,
               selectors, and IDs
               Sophisticated Font System (%-based specified in px)
               Source-order independent, Zoom friendly grids
         +font-size(size, base_size)
         +yui-base   +yui-document(width)
                                                       And much, much more...
Thursday, March 19, 2009
Thursday, March 19, 2009
Compass Makes
         Frameworks à la Carte


               At Caring.com we use Blueprint’s grids, Compass’s
               reset, YUI’s Base and Font system




Thursday, March 19, 2009
Compass Core Library
               CSS Reset               Link styling
               Sticky Footer           List Styling (bullets,
                                       orientation)
               Clearfix
                                       Table styling
               Tag Cloud
                                       (background colors,
                                       borders)
               Cross-browser inline-
               block
               Text Replacement


Thursday, March 19, 2009
Thursday, March 19, 2009
Real World Rails Example

                           http://compass-style.org/


                            Code at:
       http://github.com/chriseppstein/compass-style.org




Thursday, March 19, 2009
The Future of Compass & Sass
               Haml & Sass 2.2,                       Compass:
               Compass 1.0 stable                      Page Scaffolds (script/generate
               releases are imminent                   scaffold should be pretty!)

                                                       Design Sharing
               Sass:
                                                       Cultivate Plugin Ecosystem
                     Stylesheet Optimizer
                                                          Registry
                     Multiple styles rules per line
                                                          Installer
                     New output formats
                                                          Other CSS Frameworks
                     Localized Imports




Thursday, March 19, 2009
Open Sourced
                On Github

                    • This slide deck and related code:
                           http://github.com/chriseppstein/presentations

                    • Sass is part of Haml:
                           http://github.com/nex3/haml

                    • Compass:
                           http://github.com/chriseppstein/compass


Thursday, March 19, 2009
?
                           Q&A



Thursday, March 19, 2009

More Related Content

More from chriseppstein

The Expanding Boundaries of CSS
The Expanding Boundaries of CSSThe Expanding Boundaries of CSS
The Expanding Boundaries of CSSchriseppstein
 
EmberConf 2015 closing keynote
EmberConf 2015 closing keynoteEmberConf 2015 closing keynote
EmberConf 2015 closing keynotechriseppstein
 
What makes Sass so Syntactically Awesome?
What makes Sass so Syntactically Awesome?What makes Sass so Syntactically Awesome?
What makes Sass so Syntactically Awesome?chriseppstein
 
SassConf: It takes a village to raise a stylesheet
SassConf: It takes a village to raise a stylesheetSassConf: It takes a village to raise a stylesheet
SassConf: It takes a village to raise a stylesheetchriseppstein
 
Sass: The Future of Stylesheets
Sass: The Future of StylesheetsSass: The Future of Stylesheets
Sass: The Future of Stylesheetschriseppstein
 
Sass & Compass @ SenchaConf
Sass & Compass @ SenchaConfSass & Compass @ SenchaConf
Sass & Compass @ SenchaConfchriseppstein
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sasschriseppstein
 

More from chriseppstein (9)

The Cascade is Dead
The Cascade is DeadThe Cascade is Dead
The Cascade is Dead
 
The Expanding Boundaries of CSS
The Expanding Boundaries of CSSThe Expanding Boundaries of CSS
The Expanding Boundaries of CSS
 
Lightning fast sass
Lightning fast sassLightning fast sass
Lightning fast sass
 
EmberConf 2015 closing keynote
EmberConf 2015 closing keynoteEmberConf 2015 closing keynote
EmberConf 2015 closing keynote
 
What makes Sass so Syntactically Awesome?
What makes Sass so Syntactically Awesome?What makes Sass so Syntactically Awesome?
What makes Sass so Syntactically Awesome?
 
SassConf: It takes a village to raise a stylesheet
SassConf: It takes a village to raise a stylesheetSassConf: It takes a village to raise a stylesheet
SassConf: It takes a village to raise a stylesheet
 
Sass: The Future of Stylesheets
Sass: The Future of StylesheetsSass: The Future of Stylesheets
Sass: The Future of Stylesheets
 
Sass & Compass @ SenchaConf
Sass & Compass @ SenchaConfSass & Compass @ SenchaConf
Sass & Compass @ SenchaConf
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
 

Recently uploaded

Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applicationsnooralam814309
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfInfopole1
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...DianaGray10
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 

Recently uploaded (20)

Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
Graphene Quantum Dots-Based Composites for Biomedical Applications
Graphene Quantum Dots-Based Composites for  Biomedical ApplicationsGraphene Quantum Dots-Based Composites for  Biomedical Applications
Graphene Quantum Dots-Based Composites for Biomedical Applications
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
Extra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdfExtra-120324-Visite-Entreprise-icare.pdf
Extra-120324-Visite-Entreprise-icare.pdf
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...Explore the UiPath Community and ways you can benefit on your journey to auto...
Explore the UiPath Community and ways you can benefit on your journey to auto...
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 

Unobtrusive Stylesheets

  • 2. Building Unobtrusive Stylesheets with Sass & Compass For faster development and easier maintenance Thursday, March 19, 2009
  • 3. Chris Eppstein Web UI Architect for 7 years Software Architect for Caring.com for the last 2 years Member of the Sass core team Creator of Compass, the first Sass framework Thursday, March 19, 2009
  • 4. Assumptions You know HTML You know CSS You don’t look forward to the design phase You’re tired of reinventing the wheel when you design Thursday, March 19, 2009
  • 5. What is an Unobtrusive Stylesheet? Makes no requirements on content Only affects targeted content Thursday, March 19, 2009
  • 6. Why build Unobtrusive Stylesheets? Initial implementation is faster Changing design is faster More flexibility for theming and alternate stylesheets Redesigns made easier Better SEO Thursday, March 19, 2009
  • 7. Being Unobtrusive with CSS is Hard You need better tools Thursday, March 19, 2009
  • 8. Unobtrusive Footer without Sass & Compass Thursday, March 19, 2009
  • 9. Unobtrusive Footer with Sass & Compass Thursday, March 19, 2009
  • 10. Unobtrusive Homepage without Sass & Compass Thursday, March 19, 2009
  • 11. Unobtrusive Homepage with Sass & Compass Thursday, March 19, 2009
  • 12. Case Study: Caring.com Entire UI Redesign took the team two weeks Front-end development times down by ~40% Thursday, March 19, 2009
  • 13. What Makes Unobtrusive Hard? Repetitive Selectors – AND – Copy & Paste Styling Thursday, March 19, 2009
  • 14. What Makes Unobtrusive Hard? Repetitive Selectors – AND – Copy & Paste Styling Thursday, March 19, 2009
  • 15. What Makes Unobtrusive Hard? Repetitive Selectors – AND – Copy & Paste Styling Thursday, March 19, 2009
  • 16. Sass Makes Unobtrusive Easy Simple Descendant Selectors – AND – Abstraction Thursday, March 19, 2009
  • 17. Sass Makes Unobtrusive Easy Simple Descendant Selectors – AND – Abstraction Thursday, March 19, 2009
  • 18. Sass Makes Unobtrusive Easy Simple Descendant Selectors – AND – Abstraction Thursday, March 19, 2009
  • 19. Sass Is Whitespace Aware Indented selectors are descendant selectors Not DRY DRY Thursday, March 19, 2009
  • 20. Sass is Good at Permutation DRY Not DRY Thursday, March 19, 2009
  • 21. More Sass Syntax Thursday, March 19, 2009
  • 22. More Sass Syntax Variables Thursday, March 19, 2009
  • 23. More Sass Syntax Variables Thursday, March 19, 2009
  • 24. More Sass Syntax Attribute Namespaces Thursday, March 19, 2009
  • 25. More Sass Syntax Attribute Namespaces Thursday, March 19, 2009
  • 26. More Sass Syntax Mixins Thursday, March 19, 2009
  • 27. More Sass Syntax Mixins Thursday, March 19, 2009
  • 28. More Sass Syntax Parent References Thursday, March 19, 2009
  • 29. More Sass Syntax Parent References Thursday, March 19, 2009
  • 30. More Sass Syntax Expressions Thursday, March 19, 2009
  • 31. More Sass Syntax Expressions Thursday, March 19, 2009
  • 32. More Sass Syntax Other Benefits of Compilation: Environment-dependent output SassScript formats Partials & imports Silent comments Thursday, March 19, 2009
  • 33. There’s No Excuse Now Go forth and scope to your heart’s content Thursday, March 19, 2009
  • 34. A Cute Little Trick Ever notice how Haml looks like CSS? Selectors Delete Write Haml ready to some stuff style Via: Lachlan Hardy Thursday, March 19, 2009
  • 35. CSS Lacks Abstraction Classes are not for Style Reuse Thursday, March 19, 2009
  • 36. You’ve been picking the lesser of two evils, right? Copy & Paste Presentational Class Names Thursday, March 19, 2009
  • 37. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
  • 38. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
  • 39. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
  • 40. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
  • 41. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
  • 42. Sass Mixins are CSS Macros When you need to apply the same styles to different selectors Thursday, March 19, 2009
  • 43. Sass Script is Turing Complete Credit: Nathan Weizenbaum Thursday, March 19, 2009
  • 44. Sass Script is Turing Complete Credit: Nathan Weizenbaum Thursday, March 19, 2009
  • 45. The Only Limitation is Your Imagination and CSS... Thursday, March 19, 2009
  • 46. Sass is a Language Compass is an Ecosystem Thursday, March 19, 2009
  • 47. Compass Makes Frameworks Work Thursday, March 19, 2009
  • 48. Building Web UIs Can Be Fun Again! Thursday, March 19, 2009
  • 49. Compass Provides Built-in framework ports: Blueprint, YUI Installable plugins: 960.gs Core library Reset Sass compilation for stand-alone projects Application framework integration Thursday, March 19, 2009
  • 50. Add Compass to your Rails Application Sass has Merb/Rails integration that automatically recompiles stylesheets. Thursday, March 19, 2009
  • 51. Where’s the Sass? Compass stores its sass files in its gem Easy upgrades rake gems:unpack GEM=chriseppstein-compass Thursday, March 19, 2009
  • 52. Compass’s Blueprint Port contains a Layout DSL Configuration Parameters +container +column(n,last) !blueprint_grid_columns +last !blueprint_grid_width +append(n) !blueprint_grid_margin +prepend(n) Oh and it does some basic +push(n) styling for you if you want that. +pull(n) +blueprint-typography +blueprint-form Thursday, March 19, 2009
  • 54. Compass’s YUI Port is Configurable & Semantic YUI uses class descendants to layout grid blocks -- this makes it more complex to abstract and use than Blueprint Compass lets you configure the sizes, class names, selectors, and IDs Sophisticated Font System (%-based specified in px) Source-order independent, Zoom friendly grids +font-size(size, base_size) +yui-base +yui-document(width) And much, much more... Thursday, March 19, 2009
  • 56. Compass Makes Frameworks à la Carte At Caring.com we use Blueprint’s grids, Compass’s reset, YUI’s Base and Font system Thursday, March 19, 2009
  • 57. Compass Core Library CSS Reset Link styling Sticky Footer List Styling (bullets, orientation) Clearfix Table styling Tag Cloud (background colors, borders) Cross-browser inline- block Text Replacement Thursday, March 19, 2009
  • 59. Real World Rails Example http://compass-style.org/ Code at: http://github.com/chriseppstein/compass-style.org Thursday, March 19, 2009
  • 60. The Future of Compass & Sass Haml & Sass 2.2, Compass: Compass 1.0 stable Page Scaffolds (script/generate releases are imminent scaffold should be pretty!) Design Sharing Sass: Cultivate Plugin Ecosystem Stylesheet Optimizer Registry Multiple styles rules per line Installer New output formats Other CSS Frameworks Localized Imports Thursday, March 19, 2009
  • 61. Open Sourced On Github • This slide deck and related code: http://github.com/chriseppstein/presentations • Sass is part of Haml: http://github.com/nex3/haml • Compass: http://github.com/chriseppstein/compass Thursday, March 19, 2009
  • 62. ? Q&A Thursday, March 19, 2009

Editor's Notes

  1. Compass has been under active development for 9 months now and has an active following.
  2. CSS Features that you should know: Especially Descendent, Tag, Class, & ID Selectors You want Re-use, Abstraction, Libraries, Computation, etc. for your stylesheets.
  3. A designer should be able to style a well thought out page with little to no changes to the markup New markup should have only base styles applied to it until the designer begins work.
  4. *Initial implementation is faster because it is faster to build than debug. *Changing design is faster becase you don’t have to worry about what your change will affect, you can read your stylesheet and know because there’s no dependency inversion.
  5. CSS3: Variables, Better layout, Smarter Selectors HTML5: Scoped Stylesheets
  6. Repeat: Classes are not for style reuse
  7. Sass has all the necessary prerequisites to enable sharing styles/design.