SlideShare a Scribd company logo
AUTHORING STYLESHEETS
PROJECT




          WITH SASS AND COMPASS
DATE                   CLIENT
          7/28/2010             CSS SUMMIT
You’re there for them. We’re here for you.




CHRIS EPPSTEIN                                   FOLLOW ME ON TWITTER:
SOFTWARE ARCHITECT FOR CARING.COM                      @CHRISEPPSTEIN
HOLD ON TO YOUR HAT
WE’VE GOT A LOT TO LEARN. CSS HAS GROWN UP.
Today

Learn the Sass Syntax and features

Learn your way around a compass project

Overview of Compass Libraries

Style a webpage in minutes

Discover a new way of thinking about design
CSS3
33 New Selectors
120+ New Properties
3 New @-rules
Enhanced Media Queries
CSS3
More Sophisticated
More Powerful
More Complex



    NO NEW FEATURES TO MANAGE COMPLEXITY.
Sass &
Compass
A workhorse for CSS
developers.




      SIMPLIFYING CSS USING ABSTRACTIONS.
WHAT IS SASS?
WHAT IS COMPASS?
Sass Features
Variables              Conditionals

Nested Rules           Server-side Imports

Mixins                 Output Formatting &
                       Compression
Selector Inheritance
                       Silent Comments
Colors
                       Optional Whitespace-
Math                   Aware Syntax
Sass Syntax




   SASS       CSS
Sass: Variables




    SASS          CSS
Sass: Nested Rules




    SASS        CSS
Sass: Mixins




    SASS       CSS
Mixins: Write Your Own
Sass: Selector Inheritance




    SASS           CSS
Sass: Colors




    SASS       CSS
Sass: Colors	
    Hex                         FUNCTIONS
                                   mix
    rgb/rgba
                                   darken/lighten
    hsl/hsla
                                   transparentize/opacify
    Named Colors
                                   compliment/adjust-hue
    Alpha Layers
                                   saturate/desaturate/
                                   grayscale

                                   accessors & more
HTTP://SASS-LANG.COM/DOCS/YARDOC/SASS/SCRIPT/FUNCTIONS.HTML
Sass: Mathematical Expressions




     SASS             CSS
Sass: Numeric Units	
Handles any unit (even    EXAMPLES
those not yet defined in
CSS)

allows complex units in
intermediate forms

Understands
compatible units
Sass: Conditionals
Sass: Server Side Imports



  _sidebar.scss




  screen.scss       screen.css
Sass: Output Formats

                       COMPACT



                    COMPRESSED




NESTED   EXPANDED
Sass: Alternate Syntax
Sass: Alternate Syntax
QUESTIONS ABOUT SASS?
LET’S CLEAR THOSE UP BEFORE WE GO ANY FURTHER DOWN THE RABBIT HOLE.
OOCSS

CSS IS 14 YEARS OLD
WE’VE DEVELOPED SOME BEST PRACTICES
OOCSS

CSS FRAMEWORKS
A CODIFICATION OF BEST PRACTICES
NOT
 FRAMEWORKS
      OOCSS

COMPASS
A REAL STYLESHEET FRAMEWORK
Features
    • Project Context
    • Core Library
    • Semantic Frameworks
    • Extensions
    • Community


COMPASS
A STYLESHEET AUTHORING FRAMEWORK
WINDOWS USERS: COMPASS WORKS FOR YOU TOO!

DON’T BE SCARED
WE’RE GOING TO USE THE TERMINAL
compass create <project> --using <framework>




PROJECT CONTEXT
CREATE A NEW PROJECT IN SECONDS
compass watch




PROJECT CONTEXT
COMPASS WILL WATCH FOR CHANGES AND COMPILE AUTOMATICALLY
compass help




IF YOU NEED HELP
SELF DOCUMENTING
IF YOU NEED HELP
ONLINE DOCUMENTATION
http://groups.google.com/group/compass-users
                    http://groups.google.com/group/haml




IF YOU NEED HELP
THE COMMUNITY
Projects are more than just
Stylesheets
Images

Fonts

JavaScripts
Where are your Assets?




assets.scss
Relative Assets:                     config.rb


No Web Server Required



                assets.scss




                              assets.css
Absolute Assets:
Web Server Required
                                     config.rb




                assets.scss




                              assets.css
Set an Application                        config.rb
Path Context



                     assets.scss




                                   assets.css
Image Host
(CDN/S3/etc)                 config.rb




               assets.scss




                             assets.css
Use Asset Hosts
                                config.rb




                  assets.scss




                                assets.css
In your CSS?!




WIKIPEDIA REFERENCE   COMPASS DOCUMENTATION
Asset Helpers
 stylesheet-url - url to assets stored in the
 CSS directory

 font-url - url to assets in the font directory

 image-url - url to assets in the images directory

 inline-image - embed an image

 inline-font-files - embed a font file

http://compass-style.org/docs/reference/compass/helpers/urls/
CSS3
You’re going to hear a lot about CSS3 today.

It’s pretty cool.

But: It’s a #$%^@ mess.

Vendor prefix hell

Incompatible syntaxes

Graceful degradation / progressive enhancement
considerations

Buggy implementations
Prefix Hell



                       SIMPLE.
                   LIKE IT WILL BE.
                      ONLY NOW.

     REALLY?
  WHO DOES THIS?
   WHAT A PAIN.
Incompatible Implementations




http://compass-style.org/docs/reference/compass/css3/gradient/
Compass CSS3 Modules
          UPDATED FOR YOU AS BROWSERS DEVELOP
Background Clip                 Font Face

Background Origin               Gradient

Background Size                 Inline Block

Border Radius                   Opacity

Box                             Text Shadow

Box Shadow                      Transform

Box Sizing                      Transition

Columns

  http://compass-style.org/docs/reference/compass/css3/
Compass Utilities
Resets                           Lists: pretty bullets,
                                 no-bullets, horizontal
Sticky Footer                    lists, inline lists
Clearfix                          Sprites
Cross browser best               Tables: striping
practices: floats, mins           borders & basic styling
Links: hover-link, link-         Text: ellipsis, no-wrap,
colors, unstyled-link            text-replacement
http://compass-style.org/docs/reference/compass/utilities/
Mixin Library

A La Carte

Customizable
Browser Support

All Modern Browsers

Firefox 2

IE6 & 7

Exceptions are noted in the docs.

Compass ♥’s progressive enhancement
The Zen of Sass
‣ Beautiful Markup
‣ Stylesheets that you can
  visualize
‣ Keep presentation in your
  stylesheets.
‣ Find your own code style
‣ Build your own framework
‣ Don’t use what you don’t
  like
Susy
Created by an Eric Meyer for Compass

Uses Natalie Down’s CSS Systems approach to
grids.

Can be elastic, fixed, or fluid.

Vertical Rhythm

Utilities

                                 http://susy.oddbird.net/
Some Great Extensions
  Lemonade - Sprite Generator

  960.gs - The 960 grid system ported to Sass

  Lightboxes - Pure CSS lightboxes

  Slideshows - Pure CSS slideshows

  Fancy Buttons - Pure CSS Button
  Generator
BUILDING AN EXTENSION IS EASY!
QUESTIONS ABOUT COMPASS?
My Teammates
Nathan Wiezenbaum (@nex3) - Sass & Haml

Eric Meyer (@eriiicam) - Compass, Susy

Brandon Mathis (@imathis) - Compass, Fancy
Buttons
Compass is Charityware


If you use Compass & Sass and they make your
life better, please help make someone else’s life
better by making a tax-deductible donation to the
United Mitochondrial Disease Foundation.

http://umdf.org/compass
Photo Credits
  http://www.flickr.com/photos/oly_paul/3989018045/



  http://www.flickr.com/photos/empics/2846078511/



  http://www.flickr.com/photos/7202153@N03/3361299763/



  http://www.flickr.com/photos/euart/282104427/
Similar Projects
Less (Ruby, Javascript)

CSScaffold (PHP)

Turbine (PHP)

xCSS (PHP)

CleverCSS (Python)

Mechanical CSS (PHP)

HSS (Neko)

More Related Content

What's hot

An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
Folio3 Software
 
Intro to SASS CSS
Intro to SASS CSSIntro to SASS CSS
Intro to SASS CSS
Kianosh Pourian
 
Intro to css & sass
Intro to css & sassIntro to css & sass
Intro to css & sass
Sean Wolfe
 
Deep dive into sass
Deep dive into sassDeep dive into sass
Deep dive into sass
Knoldus Inc.
 
Sass
SassSass
Sass presentation
Sass presentationSass presentation
Sass presentation
Davin Abraham
 
Sass presentation
Sass presentationSass presentation
Compass
CompassCompass
Css 3
Css 3Css 3
Css 3
poollar
 
Css 3
Css 3Css 3
Css 3
poollar
 
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
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
Lucien Lee
 
Doing More With Less
Doing More With LessDoing More With Less
Doing More With Less
David Engel
 
[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop
Christopher Schmitt
 
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
 
October 2014 - USG Rock Eagle - Sass 101
October 2014 - USG Rock Eagle - Sass 101October 2014 - USG Rock Eagle - Sass 101
October 2014 - USG Rock Eagle - Sass 101
Eric Sembrat
 
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
 
Colors In CSS3
Colors In CSS3Colors In CSS3
Colors In CSS3
Lea Verou
 
10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)
Emily Lewis
 
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
 

What's hot (20)

An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)An Introduction to CSS Preprocessors (SASS & LESS)
An Introduction to CSS Preprocessors (SASS & LESS)
 
Intro to SASS CSS
Intro to SASS CSSIntro to SASS CSS
Intro to SASS CSS
 
Intro to css & sass
Intro to css & sassIntro to css & sass
Intro to css & sass
 
Deep dive into sass
Deep dive into sassDeep dive into sass
Deep dive into sass
 
Sass
SassSass
Sass
 
Sass presentation
Sass presentationSass presentation
Sass presentation
 
Sass presentation
Sass presentationSass presentation
Sass presentation
 
Compass
CompassCompass
Compass
 
Css 3
Css 3Css 3
Css 3
 
Css 3
Css 3Css 3
Css 3
 
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
 
CSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & CompassCSS 開發加速指南-Sass & Compass
CSS 開發加速指南-Sass & Compass
 
Doing More With Less
Doing More With LessDoing More With Less
Doing More With Less
 
[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop[Worskhop Summits] CSS3 Workshop
[Worskhop Summits] CSS3 Workshop
 
CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
 
October 2014 - USG Rock Eagle - Sass 101
October 2014 - USG Rock Eagle - Sass 101October 2014 - USG Rock Eagle - Sass 101
October 2014 - USG Rock Eagle - Sass 101
 
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
 
Colors In CSS3
Colors In CSS3Colors In CSS3
Colors In CSS3
 
10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)10 Advanced CSS Techniques (You Wish You Knew More About)
10 Advanced CSS Techniques (You Wish You Knew More About)
 
Drupal distributions - how to build them
Drupal distributions - how to build themDrupal distributions - how to build them
Drupal distributions - how to build them
 

Similar to Authoring Stylesheets with Compass & Sass

Advanced sass
Advanced sassAdvanced sass
Advanced sass
Kianosh Pourian
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
Suzette Franck
 
SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS Implementation
Amey Parab
 
Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?
sharjeet
 
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS Introduction
Irfan Maulana
 
UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
kavi806657
 
Revamp Your Stylesheet
Revamp Your StylesheetRevamp Your Stylesheet
Revamp Your Stylesheet
Gary Homidas
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by Shafeeq
DignitasDigital1
 
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
Stefan Bauer
 
Compass n Sass
Compass n SassCompass n Sass
Compass n Sass
Pradeep Saraswathi
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
Mediacurrent
 
Less
LessLess
slides-students-C04.pdf
slides-students-C04.pdfslides-students-C04.pdf
slides-students-C04.pdf
MonkeyDLuffy708724
 
Beautifying Sencha Touch
Beautifying Sencha TouchBeautifying Sencha Touch
Beautifying Sencha Touch
Neha Upadhyay
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
Eric Carlisle
 
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS Munich
Stefan Bauer
 
Beautifying senc
Beautifying sencBeautifying senc
Beautifying senc
Rachana Upadhyay
 
Introduction to sass
Introduction to sassIntroduction to sass
Introduction to sass
Anoop Raveendran
 
The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra Bhardwaj
Yatendra Bhardwaj
 
Big Frontends Made Simple
Big Frontends Made SimpleBig Frontends Made Simple
Big Frontends Made Simple
Nico Hagenburger
 

Similar to Authoring Stylesheets with Compass & Sass (20)

Advanced sass
Advanced sassAdvanced sass
Advanced sass
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
 
SCSS Implementation
SCSS ImplementationSCSS Implementation
SCSS Implementation
 
Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?Why are we using Sass to create Grid Frameworks?
Why are we using Sass to create Grid Frameworks?
 
Bliblidotcom - SASS Introduction
Bliblidotcom - SASS IntroductionBliblidotcom - SASS Introduction
Bliblidotcom - SASS Introduction
 
UNIT 3.ppt
UNIT 3.pptUNIT 3.ppt
UNIT 3.ppt
 
Revamp Your Stylesheet
Revamp Your StylesheetRevamp Your Stylesheet
Revamp Your Stylesheet
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by Shafeeq
 
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!
 
Compass n Sass
Compass n SassCompass n Sass
Compass n Sass
 
Elegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs SassElegant CSS Design In Drupal: LESS vs Sass
Elegant CSS Design In Drupal: LESS vs Sass
 
Less
LessLess
Less
 
slides-students-C04.pdf
slides-students-C04.pdfslides-students-C04.pdf
slides-students-C04.pdf
 
Beautifying Sencha Touch
Beautifying Sencha TouchBeautifying Sencha Touch
Beautifying Sencha Touch
 
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
The New UI - Staying Strong with Flexbox, SASS, and {{Mustache.js}}
 
Stop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS MunichStop your share point css become a di-sass-ter today - SPS Munich
Stop your share point css become a di-sass-ter today - SPS Munich
 
Beautifying senc
Beautifying sencBeautifying senc
Beautifying senc
 
Introduction to sass
Introduction to sassIntroduction to sass
Introduction to sass
 
The sass way - Yatendra Bhardwaj
The sass way - Yatendra BhardwajThe sass way - Yatendra Bhardwaj
The sass way - Yatendra Bhardwaj
 
Big Frontends Made Simple
Big Frontends Made SimpleBig Frontends Made Simple
Big Frontends Made Simple
 

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

More from chriseppstein (8)

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

Recently uploaded

UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
Wouter Lemaire
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
Tatiana Kojar
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
innovationoecd
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Jeffrey Haguewood
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
Dinusha Kumarasiri
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
Postman
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
Brandon Minnick, MBA
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
saastr
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
Hiroshi SHIBATA
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
LucaBarbaro3
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
ssuserfac0301
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
tolgahangng
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Tatiana Kojar
 

Recently uploaded (20)

UI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentationUI5 Controls simplified - UI5con2024 presentation
UI5 Controls simplified - UI5con2024 presentation
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
Skybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoptionSkybuffer SAM4U tool for SAP license adoption
Skybuffer SAM4U tool for SAP license adoption
 
Presentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of GermanyPresentation of the OECD Artificial Intelligence Review of Germany
Presentation of the OECD Artificial Intelligence Review of Germany
 
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
Salesforce Integration for Bonterra Impact Management (fka Social Solutions A...
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Azure API Management to expose backend services securely
Azure API Management to expose backend services securelyAzure API Management to expose backend services securely
Azure API Management to expose backend services securely
 
WeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation TechniquesWeTestAthens: Postman's AI & Automation Techniques
WeTestAthens: Postman's AI & Automation Techniques
 
Choosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptxChoosing The Best AWS Service For Your Website + API.pptx
Choosing The Best AWS Service For Your Website + API.pptx
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
Overcoming the PLG Trap: Lessons from Canva's Head of Sales & Head of EMEA Da...
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
Introduction of Cybersecurity with OSS at Code Europe 2024
Introduction of Cybersecurity with OSS  at Code Europe 2024Introduction of Cybersecurity with OSS  at Code Europe 2024
Introduction of Cybersecurity with OSS at Code Europe 2024
 
Trusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process MiningTrusted Execution Environment for Decentralized Process Mining
Trusted Execution Environment for Decentralized Process Mining
 
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
Taking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdfTaking AI to the Next Level in Manufacturing.pdf
Taking AI to the Next Level in Manufacturing.pdf
 
Serial Arm Control in Real Time Presentation
Serial Arm Control in Real Time PresentationSerial Arm Control in Real Time Presentation
Serial Arm Control in Real Time Presentation
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
Skybuffer AI: Advanced Conversational and Generative AI Solution on SAP Busin...
 

Authoring Stylesheets with Compass & Sass

Editor's Notes

  1. * graduated from Caltech in 2000 * 4 startups, F2E, UI Lead, UI Architect, etc * First Employee of Caring.com in 5/2007 * Discovered Sass about 2 years ago when it was already 2 years old, created sass port of blueprint css framework, created compass, joined the Sass core team, Recently joined the blueprint core team (again)
  2. CSS is a major front for the Browser War v2.0 Casualty of War: Front-End Developers What do all of these new features have in common? They&amp;#x2019;re all about the browser -- None of them address how we author stylesheets.
  3. CSS is a major front for the Browser War v2.0 Casualty of War: Front-End Developers What do all of these new features have in common? They&amp;#x2019;re all about the browser -- None of them address how we author stylesheets.
  4. * Sass is a stylesheet language - Built on the same primitives as CSS but with more expressiveness. * Compass is a framework that uses sass to help you author your stylesheets by providing shared tools, libraries, and standards that help users share stylesheets with each other. * Sass and Compass have Co-evolved over the past two years. Sass has existed for about 3.5 years.
  5. Example of Sass in action. &amp;#x201C;I thought Sass was supposed to make my stylesheets smaller?&amp;#x201D; Sass excels at making implicit relationships explicit -- smaller is not the goal: easier to maintain is the goal. Often this results in a smaller file.
  6. Global: $background-color, $foreground-color, $widget-width Scoped: $border-width
  7. * Later today, you&amp;#x2019;ll hear from Nicole Sullivan, creator of OOCSS. * The idea of class inheritance came from her. * Nathan and I generalized it to selector inheritance and created the first complete implementation. * I think that Sass is a great compliment to the OOCSS framework.
  8. * Write colors how you think of them * operate on colors in the hsl domain * build themes from just a few base colors * keep color relationships explicit
  9. * Create mathematical expressions to simplify change.
  10. There are other control flow directives like @for, @while but these have only marginal usefulness.
  11. partials start with an underscore but the imports do not require the underscore. this facilitates converting to a partial. partials do not generate css files imports place the contents of the imported file at the point of import. imports make the mixins and global variables of the imports file available.
  12. Use .sass instead of .scss Completely interoperable less noise: curly braces =&gt; indentation, ; =&gt; newline @include =&gt; +, @mixin =&gt; =
  13. * resets * grids * typography
  14. Best practices and patterns that are proven to work across a range of browsers.
  15. None of these are frameworks. They are libraries. But it&amp;#x2019;s easier to make a new term than convince everyone to start calling them &amp;#x201C;css libraries&amp;#x201D;.
  16. So Compass is a &amp;#x201C;Stylesheet Authoring Framework&amp;#x201D; Or for the geeks: A Meta Framework (A framework for css frameworks -- we&amp;#x2019;ll get to this later)
  17. You might want to drag this to your dock Someday there will be a GUI. But until then, this really isn&amp;#x2019;t very hard to do.
  18. * By putting the asset locations in a configuration file, you can let compass figure out how to tell the browser where they are. This makes it easier to refactor and still use relative urls when you want to. * At any time, you can set &amp;#x201C;relative_assets = true&amp;#x201D; and you&amp;#x2019;ll be able to serve images off the local filesystem irrespective of your other settings. timestamps are automatically added to invalidate browser caches when images change. (can be disabled)
  19. * By putting the asset locations in a configuration file, you can let compass figure out how to tell the browser where they are. This makes it easier to refactor and still use relative urls when you want to. * At any time, you can set &amp;#x201C;relative_assets = true&amp;#x201D; and you&amp;#x2019;ll be able to serve images off the local filesystem irrespective of your other settings. timestamps are automatically added to invalidate browser caches when images change. (can be disabled)
  20. This is the default, assets will be served root relative, via a web-server without specifying a host.
  21. Sometimes you find out your app will be hosted in a folder.
  22. a host may be specified by asset type.
  23. You can specify the asset host for each asset.
  24. Data urls let us embed assets directly in our stylesheets. Good for small images like icons where HTTP overhead is large compared to file size. Incurs encoding bloat: 33% uncompressed, 2-3% when gzipped, Doesn&amp;#x2019;t work in IE6 &amp; IE7
  25. This is how the sausage is made. It&amp;#x2019;s not pretty but the finished product tastes pretty good. Compass is your CSS sausage factory. But here&amp;#x2019;s the thing...
  26. Ok, most of what&amp;#x2019;s in compass is pretty straightforward. You could have written it yourself if you wanted. But not this. This was hard to do. There are dozens of man hours in this bit.
  27. Best practices, Battle tested, Updated regularly to reflect browser advancements. Your code remains the same.
  28. Share libraries -- not just snippets on a blog post.