Date post: | 18-Jul-2015 |
Category: |
Technology |
Upload: | sencha |
View: | 868 times |
Download: | 0 times |
Chris EppsteinSoftware Architect for Caring.comCreator of CompassMember of Sass Core Team
You’re there for them. We’re here for you.
Follow@chriseppstein
Monday, November 29, 2010
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 approach to design
Monday, November 29, 2010
CSS333 New Selectors120+ New Properties3 New @-rulesEnhanced Media Queries
Monday, November 29, 2010
CSS3More SophisticatedMore PowerfulMore Complex
No new Syntax To Manage Complexity.
Monday, November 29, 2010
Sass & CompassA workhorse for CSS developers.
Simplifying CSS Using Abstractions.
Monday, November 29, 2010
Sass Features• Variables• Nested Rules• Mixins• Selector Inheritance• Colors• Math• Conditionals• Server-side Imports• Output Formatting & Compression• Silent Comments• Optional Whitespace- Aware Syntax
Monday, November 29, 2010
Sass: Colors • mix
• darken/lighten
• transparentize/opacify
• compliment/adjust-hue
• saturate/desaturate/grayscale
• accessors & more
Functions
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
• hex
• rgb() / rgba()
• hsl() / hsla()
• Named Colors
Representations
Monday, November 29, 2010
Sass: Numeric Units •Handles any unit
•Allows complex units in intermediate forms
•Understands compatible units
Examples
Monday, November 29, 2010
CompassA Stylesheet Authoring Framework
• Project Context• Core Library• Semantic Frameworks• Extensions• Community
Monday, November 29, 2010
Project ContextCreate a new project in seconds
compass create <project> --using <framework>
Monday, November 29, 2010
Compass will Watch for changes and compile automatically
compass watch
Project Context
Monday, November 29, 2010
If you need HelpOnline Documentation
Monday, November 29, 2010
If you need HelpThe Community
http://groups.google.com/group/compass-usershttp://groups.google.com/group/haml
Monday, November 29, 2010
In your CSS?!
Wikipedia Reference Compass DocumentationMonday, November 29, 2010
Asset Helpers
stylesheet-url - url to assets stored in the CSS directoryfont-url - url to assets in the font directoryimage-url - url to assets in the images directoryinline-image - embed an imageinline-font-files - embed a font file
http://compass-style.org/docs/reference/compass/helpers/urls/
Monday, November 29, 2010
CSS3It’s pretty cool.But it’s still a work in progress:
Vendor prefix hellIncompatible syntaxesGraceful degradation / progressive enhancement considerationsBuggy implementations
Monday, November 29, 2010
Prefix Hell
Really?Who does this?
What a Pain.
Simple.Like it Will Be.
Only now.Monday, November 29, 2010
Incompatible Implementations
http://compass-style.org/docs/reference/compass/css3/gradient/
Monday, November 29, 2010
Compass CSS3 Modules
Background ClipBackground OriginBackground SizeBorder RadiusBoxBox ShadowBox SizingColumns
Font FaceGradientInline BlockOpacityText ShadowTransformTransition
http://compass-style.org/docs/reference/compass/css3/
Updated for you as browsers develop
Monday, November 29, 2010
Compass UtilitiesResetsSticky FooterClearfixCross browser best practices: floats, minsLinks: hover-link, link-colors, unstyled-linkLists: pretty bullets, no-bullets, horizontal lists, inline listsSpritesTables: striping borders & basic stylingText: ellipsis, no-wrap, text-replacement
http://compass-style.org/docs/reference/compass/utilities/
Monday, November 29, 2010
Mixin LibraryA La CarteCustomizable
Monday, November 29, 2010
Browser SupportAll Modern BrowsersFirefox 2IE6 & 7Exceptions are noted in the docs.Compass ♥’s progressive enhancement
Monday, November 29, 2010
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
Monday, November 29, 2010
SusyCreated by an Eric Meyer for CompassUses Natalie Down’s CSS Systems approach to grids.Can be elastic, fixed, or fluid.Vertical RhythmUtilities
http://susy.oddbird.net/
Monday, November 29, 2010
Lemonade - Sprite Generator960.gs - The 960 grid system ported to SassLightboxes - Pure CSS lightboxesSlideshows - Pure CSS slideshowsFancy Buttons - Pure CSS ButtonGenerator
Some Great Extensions
Building an Extension is EASY!
Monday, November 29, 2010
My TeammatesNathan Wiezenbaum (@nex3) - Sass & HamlEric Meyer (@eriiicam) - Compass, SusyBrandon Mathis (@imathis) - Compass, Fancy Buttons
Monday, November 29, 2010
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
Monday, November 29, 2010
Photo Creditshttp://www.flickr.com/photos/mistressb/3961765594/
http://www.flickr.com/photos/katietegtmeyer/68401475/
http://www.flickr.com/photos/empics/2846078511/
http://www.flickr.com/photos/7202153@N03/3361299763/
http://www.flickr.com/photos/euart/282104427/
Monday, November 29, 2010
Similar ProjectsLess (Ruby, Javascript)CSSca!old (PHP)Turbine (PHP)xCSS (PHP)CleverCSS (Python)Mechanical CSS (PHP)HSS (Neko)
Monday, November 29, 2010