SlideShare a Scribd company logo
1 of 93
Download to read offline
Sass.
The Future of Stylesheets.
Chris Eppstein
Follow me @chriseppstein
Architect - Caring.com
Creator - Compass Stylesheet Framework
Core Contributor - Sass
A website for caregivers of the sick and elderly.

The right information at just the right time

We’re HIRING!
Book:
Sass & Compass In Action
Buy the pre-release now and save 40%

http://www.manning.com/netherland/
DISCOUNT CODE: sass40 (Good through Friday)
Today
Rationale
Why does Sass exist?
What problems does it solve?
Syntax
What does Sass provide?
Best Practices
Tips, tricks & pitfalls
Questions?
Please ask them.
What is “Sass”?
Syntactically Awesome StyleSheets
What is CSS?
• Originated in Academia
• 14 Years Old
• Three Primitives:
  ‣ Selectors
  ‣ Properties
  ‣ Values
CSS is Pretty.
CSS is Pretty.
Pretty dumb.
Never in the history of
software have
developers been
asked to do so much
with so little.
Browsers & Versions
Multiple Form Factors
Desktop, Mobile, Print...
Dozens of Templates
Experiment & Test
Maintain Consistency
Performant
Due Yesterday
New Hotness:
CSS3
33 New Selectors
120+ New Properties
3 New @-rules
Enhanced Media Queries
CSS3
No new syntax*


* Yet.
Sass: The Future of Stylesheets
CSS was designed for the
Mythical Designer who is too stupid to
understand High School Algebra.
If you want to make
something simple for
beginners...
...make it powerful
enough for the experts
to create that simplicity.
But...
There is an alternative.
What is Sass?
• Born from Real World Experience
• Brings Software Development
 Methodologies to Stylesheets:
 ‣ Reusable, distributable libraries
 ‣ DRY
 ‣ Define abstractions
 ‣ Adhere to architectural boundaries
What is Sass?
New Primitives:
• Variables       • Calculations
• Mixins          • Functions
• Selector        • Conditionals
  Inheritance     • Loops
What is Sass?
It’s what CSS would have been if we had
known then what we know now:

Most stylesheets are written by
programmers.
Problem:
CSS Stylesheets
Are hard to maintain
Don’t
Repeat
Yourself
(I don’t have to tell you this -- It’s not like you want to)
A single change.
A single edit.
A single compile.
We have machines.
Let them do the busy work.
Problem:
Same Color
Many Representations
Problem:
Same Color
Different Reasons
Sass: The Future of Stylesheets
rgba(#f00, 1.0)
                   hsla(0deg, 100%, 100%, 1)

hsl(0deg, 100%, 100%)
                                  #f00


  rgb(255, 0, 0)     red
     RED                   rgba(255, 0, 0, 1.0)
Solution:
Variables
The most requested CSS enhancement
Use variables anywhere a value is allowed.
Sass: The Future of Stylesheets
Problem:
Magic Values
Lost knowledge
Deceptively Complex
Solution:
Transformations
Derive values during compilation
As complex as it actually is.
Sass Color Functions

mix(red, blue, 40%)         =>   #660099
lighten(red, 10%)           =>   #ff3333
darken(red, 10%)            =>   #cc0000
desaturate(red, 10%)        =>   #f20d0d
saturate(#511, 10%)         =>   #5a0c0c
transparentize(red, 0.25)   =>   rgba(255, 0, 0, 0.75)
opacify(red, 0.25)          =>   rgba(255, 0, 0, 0.75)
grayscale(red)              =>   #808080
complement(red)             =>   #00ffff



There’s more on the Sass website.
Solution:
Make Reusable Calculations
We call these things “functions”
Sass: The Future of Stylesheets
Deceptively Complex
Solution:
Abstractions &
Calculations
Derive values during compilation
Create a simple abstraction
As complex as it actually is.
Best Practice:
Minimize HTTP Round Trips
Problem:
Long Stylesheets
Hard to find your styles.
And I mean long...




                     Seriously, this keeps going...
Solution:
Concatenation &
Partials
Partials: Just like with html templates, underscores denote a
partial and can only be imported by other stylesheets.
Convention: Each folder has a file of the same name that
imports the files contained within it in the correct order.
Problem:
Shared Stylesheets
Styles leak into places you didn’t intend
Sitewide Styles


    Forum        Blog       Articles    Directory


I    T   F   L    P     F   I   A   C   S   L   R
n    h   o   i    o     o   n   r   o   e   i   e
d    r   r   s    s     r   d   t   m   a   s   v
e    e   m   t    t     m   e   i   m   r   t   i
x    a                      x   c   e   c   i   e
     d                          l   n   h   n   w
                                e   t       g
Solution:
Scoped Selectors
CSS gives you
carpal tunnel
from typing
your scopes
OVER &
OVER AGAIN
Sass Provides
DRY Selectors
via nesting
Nested Selectors
• Default: descendant
• & - context reference
• Works with combinators




Co
 mp
  ile
     st
       o
Problem:
Dozens of Images
Spriting is annoying
Solution:
Compass Sprites
gem “compass”




Simple Sprites
(Compass makes
classes for you)


                   Or you can define your
                   own selectors.
Sass: The Future of Stylesheets
Problem:
Dozens More Images
Solution:
Use CSS3 Instead
Abstract vendor prefixes away
Sass: The Future of Stylesheets
gem “compass”
Sass: The Future of Stylesheets
Best Practice:
Use a CDN / Asset Hosts
Load assets faster
Problem:
Image URLs Change
Solution:
Use URL Helpers
Just like in Rails
o
        st
     ile
  mp
Co
Best Practice:
Separate Content & Presentation
Problem:
Classitis
Sass: The Future of Stylesheets
Solution:
Move Presentation Concerns
They belong in your stylesheets
This is all you should need.
o
            st
         ile
      mp
    Co
+




                   Mixins
Mixins
Create a design vocabulary
of common patterns independent
from your markup's selector
domain
More Mixins




       +
        Compiles to
More Mixins



       +

        Compiles to
More Mixins




       +
           Compiles to
This is all you should need.
Compiles to




Selector Inheritance
We’ve Only
Scratched the Surface
http://sass-lang.com
http://compass-style.org
My Teammates

Lead Developer of Sass
Nathan Wiezenbaum (@nex3)

The Compass Core Team
Eric Meyer (@eriiicam)
Brandon Mathis (@imathis)
Scott Davis (@jetviper21)
Nico Hagenburger (@hagenburger)
Compass is Charityware


If you use Compass and it makes 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

More Related Content

What's hot

Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSSRuss Weakley
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The FabulousNicole Sullivan
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12ucbdrupal
 
Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013Andrea Tarr
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build themDick Olsson
 
Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Thinkful
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeAcquia
 
WordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP FrameworkWordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP FrameworkPtah Dunbar
 
Wcphx 2012-workshop
Wcphx 2012-workshopWcphx 2012-workshop
Wcphx 2012-workshopPtah Dunbar
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassLucien Lee
 

What's hot (20)

Inline, Block and Positioning in CSS
Inline, Block and Positioning in CSSInline, Block and Positioning in CSS
Inline, Block and Positioning in CSS
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS
 
CSS Systems
CSS SystemsCSS Systems
CSS Systems
 
HTML News Packages Lesson
HTML News Packages LessonHTML News Packages Lesson
HTML News Packages Lesson
 
LESS vs. SASS
LESS vs. SASSLESS vs. SASS
LESS vs. SASS
 
CSS Reset
CSS ResetCSS Reset
CSS Reset
 
Css 3
Css 3Css 3
Css 3
 
Css 3
Css 3Css 3
Css 3
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
 
Css to-scss
Css to-scssCss to-scss
Css to-scss
 
BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12BDUG Responsive Web Theming - 7/23/12
BDUG Responsive Web Theming - 7/23/12
 
Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013Using LESS, the CSS Preprocessor: J and Beyond 2013
Using LESS, the CSS Preprocessor: J and Beyond 2013
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build them
 
Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)
 
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 ThemeCreating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
Creating Responsive Drupal Sites with Zen Grids and the Zen 5 Theme
 
WordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP FrameworkWordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP Framework
 
Wcphx 2012-workshop
Wcphx 2012-workshopWcphx 2012-workshop
Wcphx 2012-workshop
 
@wcmtl
@wcmtl@wcmtl
@wcmtl
 
CSS Fundamentals
CSS FundamentalsCSS Fundamentals
CSS Fundamentals
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
 

Similar to Sass: The Future of Stylesheets

Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersMelvin John
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compassNick Cooley
 
Design and CSS
Design and CSSDesign and CSS
Design and CSSnolly00
 
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3Denise Jacobs
 
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS FrameworksAdrian Westlake
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondDenise Jacobs
 
The Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital CampThe Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital Campcanarymason
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and ReadyDenise Jacobs
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS TroubleshootingDenise Jacobs
 
How to build the perfect pattern library
How to build the perfect pattern libraryHow to build the perfect pattern library
How to build the perfect pattern libraryWolf Brüning
 
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsMario Hernandez
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LAJake Johnson
 
Spectrum 2015 going online with style - an intro to css
Spectrum 2015   going online with style - an intro to cssSpectrum 2015   going online with style - an intro to css
Spectrum 2015 going online with style - an intro to cssNeil Perlin
 
Getting Sassy with CSS
Getting Sassy with CSSGetting Sassy with CSS
Getting Sassy with CSSJulie Cameron
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?Russ Weakley
 
The Why and What of Pattern Lab
The Why and What of Pattern LabThe Why and What of Pattern Lab
The Why and What of Pattern LabDave Olsen
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
 
Intro to OOCSS Workshop
Intro to OOCSS WorkshopIntro to OOCSS Workshop
Intro to OOCSS WorkshopJulie Cameron
 
What is-sass-by-lucas-castro
What is-sass-by-lucas-castroWhat is-sass-by-lucas-castro
What is-sass-by-lucas-castroLucas Castro
 

Similar to Sass: The Future of Stylesheets (20)

Introduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for DevelopersIntroduction to Bootstrap: Design for Developers
Introduction to Bootstrap: Design for Developers
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass
 
Design and CSS
Design and CSSDesign and CSS
Design and CSS
 
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3
 
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS Frameworks
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
 
The Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital CampThe Coding Designer's Survival Kit - Capital Camp
The Coding Designer's Survival Kit - Capital Camp
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and Ready
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
 
How to build the perfect pattern library
How to build the perfect pattern libraryHow to build the perfect pattern library
How to build the perfect pattern library
 
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive Enhacements
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LA
 
Spectrum 2015 going online with style - an intro to css
Spectrum 2015   going online with style - an intro to cssSpectrum 2015   going online with style - an intro to css
Spectrum 2015 going online with style - an intro to css
 
Getting Sassy with CSS
Getting Sassy with CSSGetting Sassy with CSS
Getting Sassy with CSS
 
Is everything we used to do wrong?
Is everything we used to do wrong?Is everything we used to do wrong?
Is everything we used to do wrong?
 
The Why and What of Pattern Lab
The Why and What of Pattern LabThe Why and What of Pattern Lab
The Why and What of Pattern Lab
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
Intro to OOCSS Workshop
Intro to OOCSS WorkshopIntro to OOCSS Workshop
Intro to OOCSS Workshop
 
What is-sass-by-lucas-castro
What is-sass-by-lucas-castroWhat is-sass-by-lucas-castro
What is-sass-by-lucas-castro
 

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 & Compass @ SenchaConf
Sass & Compass @ SenchaConfSass & Compass @ SenchaConf
Sass & Compass @ SenchaConfchriseppstein
 
Unobtrusive Stylesheets
Unobtrusive StylesheetsUnobtrusive Stylesheets
Unobtrusive Stylesheetschriseppstein
 

More from chriseppstein (7)

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
 
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 & Compass @ SenchaConf
Sass & Compass @ SenchaConfSass & Compass @ SenchaConf
Sass & Compass @ SenchaConf
 
Unobtrusive Stylesheets
Unobtrusive StylesheetsUnobtrusive Stylesheets
Unobtrusive Stylesheets
 

Recently uploaded

The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 

Recently uploaded (20)

20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 

Sass: The Future of Stylesheets

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. Yes, it’s an acronym.\n But, it’s *not* all caps.\n Why? I don’t know. \n Alternate Syntax\nCompiles to CSS\nTo understand Sass, you must know CSS\n \n
  11. \n
  12. CSS Selectors are great -- that’s why we use them in jQuery & Haml\nProperties are simple key/value pairs.\nCSS is elegantly simple.\n
  13. Maybe my memory doesn’t go back very far.\n\nI’m sure punch cards and assembler sucked.\n
  14. 9 Browsers\n25 Versions\nPace of development is increasing\n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. CSS is a major front for the Browser War v2.0\nCasualty of War: Front-End Developers\nWhat do all of these new features have in common?\nThey’re all about the browser -- None of them address how we author stylesheets. \n
  23. \n
  24. \n
  25. \n
  26. I think rails is a great example of this. Ruby is incredibly powerful, that power makes the best practices of web programming accessible and scaffolds the n00bs during the learning process as they peel the layers of abstraction back.\n
  27. \n
  28. What if we gave stylesheets some brains?\n
  29. \n
  30. Alternate Syntax\nCompiles to CSS\nWe’ll get to these primitives in a second\n\n
  31. But: Sass in the hands in of a technical designer is a BEAUTIFUL THING\n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. Accidentally the same?\n
  39. You cannot safely Search and Replace a color.\n
  40. \n
  41. \n
  42. \n
  43. \n
  44. where do these colors come from? Clearly they’re related -- must be designer voodoo.\n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. Why is it 366px? If I want to change the border width, how should I adjust these values?\n
  51. \n
  52. Now our changes are obvious and the implementation details elided.\n
  53. Currently most of these calculations are done on a scratch pad.\n\nseriously.\n
  54. \n
  55. Don’t use CSS @import.\n Serve a few, longer stylesheets.\n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. Notice that comma selectors are permuted\n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. Compass CSS3 mixin arguments mimic the real css3 property values.\n
  73. \n
  74. \n
  75. relative paths\nroot relative paths\nroot changes\nasset hosts\ncdns\n\n\n
  76. \n
  77. \n
  78. \n
  79. Do you have markup that looks like this?\n
  80. You’re officially doing it wrong.\n\nBut I get it. You need re-use.\n
  81. \n
  82. \n
  83. \n
  84. \n
  85. \n
  86. \n
  87. \n
  88. \n
  89. \n
  90. \n
  91. \n
  92. \n