SlideShare a Scribd company logo
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 Cascade is Dead
The Cascade is DeadThe Cascade is Dead
The Cascade is Dead
chriseppstein
 
The Expanding Boundaries of CSS
The Expanding Boundaries of CSSThe Expanding Boundaries of CSS
The Expanding Boundaries of CSS
chriseppstein
 
Lightning fast sass
Lightning fast sassLightning fast sass
Lightning fast sass
chriseppstein
 
EmberConf 2015 closing keynote
EmberConf 2015 closing keynoteEmberConf 2015 closing keynote
EmberConf 2015 closing keynote
chriseppstein
 
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 stylesheet
chriseppstein
 
Sass: The Future of Stylesheets
Sass: The Future of StylesheetsSass: The Future of Stylesheets
Sass: The Future of Stylesheets
chriseppstein
 
Sass & Compass @ SenchaConf
Sass & Compass @ SenchaConfSass & Compass @ SenchaConf
Sass & Compass @ SenchaConf
chriseppstein
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
chriseppstein
 

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

TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
HackersList
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
ldtexsolbl
 
Patch Tuesday de julio
Patch Tuesday de julioPatch Tuesday de julio
Patch Tuesday de julio
Ivanti
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
aslasdfmkhan4750
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
Zilliz
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
313mohammedarshad
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
shanihomely
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
aakash malhotra
 
What's new in android: jetpack compose 2024
What's new in android: jetpack compose 2024What's new in android: jetpack compose 2024
What's new in android: jetpack compose 2024
Toru Wonyoung Choi
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
BrainSell Technologies
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
SAI KAILASH R
 
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
Priyanka Aash
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
Steven Carlson
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
Safe Software
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
Matthias Neugebauer
 

Recently uploaded (20)

TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
WhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring AppsWhatsApp Spy Online Trackers and Monitoring Apps
WhatsApp Spy Online Trackers and Monitoring Apps
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
Types of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technologyTypes of Weaving loom machine & it's technology
Types of Weaving loom machine & it's technology
 
Patch Tuesday de julio
Patch Tuesday de julioPatch Tuesday de julio
Patch Tuesday de julio
 
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
High Profile Girls Call ServiCe Hyderabad 0000000000 Tanisha Best High Class ...
 
Using LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and MilvusUsing LLM Agents with Llama 3, LangGraph and Milvus
Using LLM Agents with Llama 3, LangGraph and Milvus
 
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptxIntroduction-to-the-IAM-Platform-Implementation-Plan.pptx
Introduction-to-the-IAM-Platform-Implementation-Plan.pptx
 
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Premium Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024Three New Criminal Laws in India 1 July 2024
Three New Criminal Laws in India 1 July 2024
 
What's new in android: jetpack compose 2024
What's new in android: jetpack compose 2024What's new in android: jetpack compose 2024
What's new in android: jetpack compose 2024
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and DisadvantagesBLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
BLOCKCHAIN TECHNOLOGY - Advantages and Disadvantages
 
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
(CISOPlatform Summit & SACON 2024) Orientation by CISO Platform_ Using CISO P...
 
Vulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive OverviewVulnerability Management: A Comprehensive Overview
Vulnerability Management: A Comprehensive Overview
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
Opencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of MünsterOpencast Summit 2024 — Opencast @ University of Münster
Opencast Summit 2024 — Opencast @ University of Münster
 

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.