Sass Essentials at Mobile Camp LA

855 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
855
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

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
  • Sass Essentials at Mobile Camp LA

    1. 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. 2. Kansas City, MO
    3. 3. [ Delicious stack of ribs intentionally removed due to presentation timing ]BBQ Capital of the World
    4. 4. Clean HTML & CSS
    5. 5. Empower developers to go further, faster.
    6. 6. +CSS3 Mixins, Automatic Spriting, Reusable Patterns
    7. 7. If you like Compass use Sass.
    8. 8. If you want max speed use Stylus.
    9. 9. Overview1 Getting Started2 Sass Essentials3 Placeholders & Style Patterns4 Compass Essentials5 The Future: OOCSS & SMACSS
    10. 10. Why I ♥ SassClean, beautiful syntax.Reusable mixins and patterns.Responsive design is mucheasier.Speeds up my workflow.
    11. 11. FYI... it’s Sass not SASS!
    12. 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. 13. Variables
    14. 14. VARIABLES IN ACTIONColor Schemes
    15. 15. VARIABLES IN ACTIONBackground URL Paths
    16. 16. VARIABLES IN ACTIONDefault Dimensions
    17. 17. VARIABLES IN ACTIONQuick Layout Switching
    18. 18. Operations + - * / %
    19. 19. OPERATIONS IN ACTIONResponsive Web Design Formula Target / Context = Resultconfig.rbhttp://www.alistapart.com/articles/fluidgrids/
    20. 20. OPERATIONS IN ACTIONMath and Variables
    21. 21. OPERATIONS IN ACTIONString Operations
    22. 22. Functions
    23. 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. 24. Nesting
    25. 25. Nesting Selectors
    26. 26. Nesting Properties
    27. 27. Parent References(Before)& Before Selector Decorations:Great for pseudo-classes like :hover, :active, :focus,etc.
    28. 28. Parent References(Before)Good for classes too, especially for togglinganimations.
    29. 29. Parent References(After)& After Selector Decorations:& just repeats the parent selector. What if you placeit after the selector?
    30. 30. Parent References(After)
    31. 31. “With great power comes great responsibility.”
    32. 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. 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. 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. 35. Take the next two with a grain of salt...
    36. 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. 37. Just do the best you can.
    38. 38. Selector Inheritance (@extend)
    39. 39. Inherit Styles without Duplicating@EXTEND IN ACTIONProperties
    40. 40. Inherit Styles without Duplicating@EXTEND IN ACTIONProperties
    41. 41. ArgumentsMixins @content Blocks Injects into your rules
    42. 42. MIXIN EXAMPLESSimple Media Queries
    43. 43. MIXIN EXAMPLESRem Font SizingEm: Size is relative to the parent element.Rem: Size is relative to the root element <html>.
    44. 44. MIXIN EXAMPLESFont Family Sets
    45. 45. MIXIN EXAMPLESFont Weight Sets
    46. 46. MIXIN EXAMPLESImage Replacementhttp://nicolasgallagher.com/another-css-image-replacement-technique/
    47. 47. MIXIN EXAMPLESMargin / Padding Resets
    48. 48. Placeholders
    49. 49. Inherit Styles without Duplicating@EXTEND IN ACTIONProperties
    50. 50. Placeholder ExampleSimilar to class @extends, but silent. No code bloat.Use as style patterns. Non-semantic CSS modules.
    51. 51. Placeholder vs. Class@extendPlaceholder (Silent) Class @extend
    52. 52. Less Class Bloat DRY SassDRY Compiled CSS
    53. 53. Advantages of Placeholders vs.MixinsCombined with Selectors, Not InjectedLeaner Compiled CSSUse Mixins for @content Support
    54. 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. 55. COMPASS MIXINSCSS3 for Mobile+box-sizing(border- Flex Box for Portraitbox) & Landscape Variable Widths
    56. 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. 57. COMPASS MIXINSAutomatic Spriting
    58. 58. COMPASS MIXINSTypographyLinks Lists TextHover Link Bullets EllipsisLink Colors Horizontal List Force WrapUnstyled Link Inline-Block List No Wrap Inline List Text Replacement
    59. 59. COMPASS MIXINSGeneral Utilities+Clearfix Float Hacks Minimums Reset Tag Cloud
    60. 60. OOCSS: Object Oriented CSSFaster Websites Easier Maintenance Rapid Iteration & Testing
    61. 61. Principle #1Separate Structure and Skin
    62. 62. Principle #2Separate Container and ContentAvoid Complicated NestingWhat we’ve been learning all along!
    63. 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. 64. http://csslint.net/
    65. 65. Going Further http://smacss.com/book/https://github.com/stubbornella/oocss
    66. 66. Thank You! ✉jake@divshot.com @jakejohnson

    ×