SlideShare a Scribd company logo
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

Inline, Block and Positioning in CSS
Inline, Block and Positioning in CSSInline, Block and Positioning in CSS
Inline, Block and Positioning in CSS
UC Berkeley Graduate School of Journalism
 
Efficient, maintainable CSS
Efficient, maintainable CSSEfficient, maintainable CSS
Efficient, maintainable CSS
Russ Weakley
 
CSS Systems
CSS SystemsCSS Systems
CSS Systems
Natalie Downe
 
HTML News Packages Lesson
HTML News Packages LessonHTML News Packages Lesson
LESS vs. SASS
LESS vs. SASSLESS vs. SASS
LESS vs. SASS
Austin Pickett
 
CSS Reset
CSS ResetCSS Reset
CSS Reset
Russ Weakley
 
Css 3
Css 3Css 3
Css 3
poollar
 
Css 3
Css 3Css 3
Css 3
poollar
 
The Fast And The Fabulous
The Fast And The FabulousThe Fast And The Fabulous
The Fast And The Fabulous
Nicole Sullivan
 
Css to-scss
Css to-scssCss to-scss
Css to-scss
frontendne
 
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
ucbdrupal
 
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
Andrea Tarr
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build them
Dick 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 Theme
Acquia
 
WordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP FrameworkWordCamp Miami 09 - WP Framework
WordCamp Miami 09 - WP Framework
Ptah Dunbar
 
Wcphx 2012-workshop
Wcphx 2012-workshopWcphx 2012-workshop
Wcphx 2012-workshop
Ptah Dunbar
 
@wcmtl
@wcmtl@wcmtl
@wcmtl
Ptah Dunbar
 
CSS Fundamentals
CSS FundamentalsCSS Fundamentals
CSS Fundamentals
Ray Villalobos
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
Lucien 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 Developers
Melvin John
 
Advanced sass/compass
Advanced sass/compassAdvanced sass/compass
Advanced sass/compass
Nick Cooley
 
Design and CSS
Design and CSSDesign and CSS
Design and CSS
nolly00
 
Simply Responsive CSS3
Simply Responsive CSS3Simply Responsive CSS3
Simply Responsive CSS3
Denise Jacobs
 
An Introduction to CSS Frameworks
An Introduction to CSS FrameworksAn Introduction to CSS Frameworks
An Introduction to CSS Frameworks
Adrian Westlake
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
Denise 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 Camp
canarymason
 
CSS3: Ripe and Ready
CSS3: Ripe and ReadyCSS3: Ripe and Ready
CSS3: Ripe and Ready
Denise Jacobs
 
Advanced CSS Troubleshooting
Advanced CSS TroubleshootingAdvanced CSS Troubleshooting
Advanced CSS Troubleshooting
Denise Jacobs
 
Intro to CSS3
Intro to CSS3Intro to CSS3
Intro to CSS3
Denise 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 library
Wolf Brüning
 
CSS Framework + Progressive Enhacements
CSS Framework + Progressive EnhacementsCSS Framework + Progressive Enhacements
CSS Framework + Progressive Enhacements
Mario Hernandez
 
Sass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LASass Essentials at Mobile Camp LA
Sass Essentials at Mobile Camp LA
Jake 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 css
Neil Perlin
 
Getting Sassy with CSS
Getting Sassy with CSSGetting Sassy with CSS
Getting Sassy with CSS
Julie 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 Lab
Dave 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 4
Erin M. Kidwell
 
Intro to OOCSS Workshop
Intro to OOCSS WorkshopIntro to OOCSS Workshop
Intro to OOCSS Workshop
Julie Cameron
 
What is-sass-by-lucas-castro
What is-sass-by-lucas-castroWhat is-sass-by-lucas-castro
What is-sass-by-lucas-castro
Lucas 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 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
 
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 & Compass @ SenchaConf
Sass & Compass @ SenchaConfSass & Compass @ SenchaConf
Sass & Compass @ SenchaConf
chriseppstein
 
Unobtrusive Stylesheets
Unobtrusive StylesheetsUnobtrusive Stylesheets
Unobtrusive Stylesheets
chriseppstein
 

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

Zaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdfZaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdf
AmandaCheung15
 
Step-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From ScratchStep-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From Scratch
softsuave
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
DianaGray10
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Networks
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Kunal Gupta
 
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
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
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
 
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
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
ankush9927
 
Patch Tuesday de julio
Patch Tuesday de julioPatch Tuesday de julio
Patch Tuesday de julio
Ivanti
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptxMAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
janagijoythi
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
ssuser1915fe1
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
Baishakhi Ray
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Torry Harris
 
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
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
bellared2
 

Recently uploaded (20)

Zaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdfZaitechno Handheld Raman Spectrometer.pdf
Zaitechno Handheld Raman Spectrometer.pdf
 
Step-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From ScratchStep-By-Step Process to Develop a Mobile App From Scratch
Step-By-Step Process to Develop a Mobile App From Scratch
 
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision MakingConnector Corner: Leveraging Snowflake Integration for Smarter Decision Making
Connector Corner: Leveraging Snowflake Integration for Smarter Decision Making
 
IPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite SolutionIPLOOK Remote-Sensing Satellite Solution
IPLOOK Remote-Sensing Satellite Solution
 
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptxDublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
Dublin_mulesoft_meetup_Mulesoft_Salesforce_Integration (1).pptx
 
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
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
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 ...
 
Data Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining DataData Integration Basics: Merging & Joining Data
Data Integration Basics: Merging & Joining Data
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
 
Patch Tuesday de julio
Patch Tuesday de julioPatch Tuesday de julio
Patch Tuesday de julio
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptxMAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
MAKE MONEY ONLINE Unlock Your Income Potential Today.pptx
 
Feature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptxFeature sql server terbaru performance.pptx
Feature sql server terbaru performance.pptx
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
 
Evolution of iPaaS - simplify IT workloads to provide a unified view of data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...Evolution of iPaaS - simplify IT workloads to provide a unified view of  data...
Evolution of iPaaS - simplify IT workloads to provide a unified view of 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
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
Russian Girls Call Navi Mumbai 🎈🔥9920725232 🔥💋🎈 Provide Best And Top Girl Ser...
 

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