Sass Essentials at Mobile Camp LA

  • 431 views
Uploaded on

Everything you need to know about Sass for web app design, along with useful mixin examples!

Everything you need to know about Sass for web app design, along with useful mixin examples!

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
431
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. Building Mobile Web Apps 📱 with LESS / Sass / StylusSpeed up your front-end workflow with CSSpreprocessors. Mobile Camp Los Angeles Jake Johnson October 18, 2012
  • 2. Kansas City, MO
  • 3. [ Delicious stack of ribs intentionally removed due to presentation timing ]BBQ Capital of the World
  • 4. Clean HTML & CSS
  • 5. Empower developers to go further, faster.
  • 6. +CSS3 Mixins, Automatic Spriting, Reusable Patterns
  • 7. If you like Compass use Sass.
  • 8. If you want max speed use Stylus.
  • 9. Overview1 Getting Started2 Sass Essentials3 Placeholders & Style Patterns4 Compass Essentials5 The Future: OOCSS & SMACSS
  • 10. Why I ♥ SassClean, beautiful syntax.Reusable mixins and patterns.Responsive design is mucheasier.Speeds up my workflow.
  • 11. FYI... it’s Sass not SASS!
  • 12. Getting Startedsudo gem install compasscompass createcompass watchhttp://incident57.com/codekit/ http://mhs.github.com/scout-app/http://livereload.com/ http://smalify.net/http://compass.handlino.com/
  • 13. Variables
  • 14. VARIABLES IN ACTIONColor Schemes
  • 15. VARIABLES IN ACTIONBackground URL Paths
  • 16. VARIABLES IN ACTIONDefault Dimensions
  • 17. VARIABLES IN ACTIONQuick Layout Switching
  • 18. Operations + - * / %
  • 19. OPERATIONS IN ACTIONResponsive Web Design Formula Target / Context = Resultconfig.rbhttp://www.alistapart.com/articles/fluidgrids/
  • 20. OPERATIONS IN ACTIONMath and Variables
  • 21. OPERATIONS IN ACTIONString Operations
  • 22. Functions
  • 23. Useful Functionsround(), ceil(), floor(), min(), max()lighten($navyblue, 50%)darken($maplesyrup, 40%)saturate() / desaturate()transparentize(#000, 20%)http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
  • 24. Nesting
  • 25. Nesting Selectors
  • 26. Nesting Properties
  • 27. Parent References(Before)& Before Selector Decorations:Great for pseudo-classes like :hover, :active, :focus,etc.
  • 28. Parent References(Before)Good for classes too, especially for togglinganimations.
  • 29. Parent References(After)& After Selector Decorations:& just repeats the parent selector. What if you placeit after the selector?
  • 30. Parent References(After)
  • 31. “With great power comes great responsibility.”
  • 32. The Inception RuleDon’t go more than 4 levelsdeep.http://thesassway.com/beginner/the-inception-ruleThe Problem:body body { ... } body div.content div.container { ... } div.container body div.content div.container div.articles { ... } div.content body div.content div.container div.articles > div.post { ... } div.articles body div.content div.container div.articles > div.post div.title { ... } & > div.post body div.content div.container div.articles > div.post div.title h1 { ... } body div.content div.container div.articles > div.post div.title h1 a { ... } div.title body div.content div.container div.articles > div.post div.content { ... } h1 body div.content div.container div.articles > div.post div.content p { ... } a body div.content div.container div.articles > div.post div.content ul { ... } div.content body div.content div.container div.articles > div.post div.content ul li { ... } body div.content div.container div.articles > div.post div.author { ... } p body div.content div.container div.articles > div.post div.author a.display { ... } ul body div.content div.container div.articles > div.post div.author a.display img { ... } li body div.content div.container div.articles > div.post div.author h4 { ... } div.author body div.content div.container div.articles > div.post div.author h4 a { ... } a.display body div.content div.container div.articles > div.post div.author p { ... } body div.content div.container div.articles > div.post div.author p a { ... } img body div.content div.container div.articles > div.post div.author ul { ... } h4 body div.content div.container div.articles > div.post div.author ul li { ... } a p a
  • 33. The Inception Rule“But the rendering performance and file size isn’tthat big of a deal.”Your styles are chained to the DOM, makingmaintenance more difficult.1) Focus on reusability for different contexts.2) Reduce the # of selectors as much as you can.Lower File Size, Better Rendering Performance,Easier Maintenance. Get in the habit!
  • 34. Google’s RecommendationsAvoid a universal key selector.Make your rules as specific as possible.Class and ID selectors over tag selectors.You can still use tag selectors, but try to make them top level.Remove redundant qualifiers.https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors
  • 35. Take the next two with a grain of salt...
  • 36. Google’s RecommendationsAvoid using descendant selectors, especiallythose that specify redundant ancestors.Use class selectors instead of descendantselectors.https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors
  • 37. Just do the best you can.
  • 38. Selector Inheritance (@extend)
  • 39. Inherit Styles without Duplicating@EXTEND IN ACTIONProperties
  • 40. Inherit Styles without Duplicating@EXTEND IN ACTIONProperties
  • 41. ArgumentsMixins @content Blocks Injects into your rules
  • 42. MIXIN EXAMPLESSimple Media Queries
  • 43. MIXIN EXAMPLESRem Font SizingEm: Size is relative to the parent element.Rem: Size is relative to the root element <html>.
  • 44. MIXIN EXAMPLESFont Family Sets
  • 45. MIXIN EXAMPLESFont Weight Sets
  • 46. MIXIN EXAMPLESImage Replacementhttp://nicolasgallagher.com/another-css-image-replacement-technique/
  • 47. MIXIN EXAMPLESMargin / Padding Resets
  • 48. Placeholders
  • 49. Inherit Styles without Duplicating@EXTEND IN ACTIONProperties
  • 50. Placeholder ExampleSimilar to class @extends, but silent. No code bloat.Use as style patterns. Non-semantic CSS modules.
  • 51. Placeholder vs. Class@extendPlaceholder (Silent) Class @extend
  • 52. Less Class Bloat DRY SassDRY Compiled CSS
  • 53. Advantages of Placeholders vs.MixinsCombined with Selectors, Not InjectedLeaner Compiled CSSUse Mixins for @content Support
  • 54. COMPASS MIXINSCross-Browser CSS3Appearance Font FaceBackground Clip HyphenationBackground Origin Images / GradientsBackground Size Inline BlockBorder Radius OpacityBox (Flex Box) CSS RegionsBox Shadow Text ShadowBox Sizing TransformColumns TransitionFilter
  • 55. COMPASS MIXINSCSS3 for Mobile+box-sizing(border- Flex Box for Portraitbox) & Landscape Variable Widths
  • 56. COMPASS FUNCTIONSHelper Functionsadjust-lightness() image-height() stylesheet-url()adjust-saturation() image-url() scale-lightness()append-selector() inline-font-files() shade()color-stops() inline-image() tan()cos() log() tint()css2-fallback() nest() -css2()e() pow() -moz()elements-of-type() prefix() -ms()enumerate() prefixed() -o()font-files() pi() -pie()font-url() sin() -svg()headings() sqrt() -webkit()image-width()
  • 57. COMPASS MIXINSAutomatic Spriting
  • 58. COMPASS MIXINSTypographyLinks Lists TextHover Link Bullets EllipsisLink Colors Horizontal List Force WrapUnstyled Link Inline-Block List No Wrap Inline List Text Replacement
  • 59. COMPASS MIXINSGeneral Utilities+Clearfix Float Hacks Minimums Reset Tag Cloud
  • 60. OOCSS: Object Oriented CSSFaster Websites Easier Maintenance Rapid Iteration & Testing
  • 61. Principle #1Separate Structure and Skin
  • 62. Principle #2Separate Container and ContentAvoid Complicated NestingWhat we’ve been learning all along!
  • 63. OOCSS Basic TipsDon’t make your base element styles dependenton its surrounding DOM.Add semantic classes to elements and use Sassplaceholder patterns to skin.You can still use IDs in your markup forJavaScript. Use classes for reusability.
  • 64. http://csslint.net/
  • 65. Going Further http://smacss.com/book/https://github.com/stubbornella/oocss
  • 66. Thank You! ✉jake@divshot.com @jakejohnson