Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Getting Sassy with Sass

Getting Sassy with Sass

If you are a theme developer, using SASS or Syntactically Awesome Stylesheets is a time saving way to write your code and it is easy to learn once you are familiar with CSS. In this session, you will learn how to harness the power of variables, nesting, and mixins and take advantage of everything that SASS has to offer to write awesome code. In order to get the most from this session, you must have a good understanding of HTML and CSS.

Suzette Franck

March 15, 2014
Tweet

More Decks by Suzette Franck

Other Decks in Technology

Transcript

  1. Getting Sassy Suzette Franck 2014 Atlanta WordCamp Atlanta, GA Saturday,

    March 15th, 2014 Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
  2. Getting Sassy Suzette Franck 2014 Atlanta WordCamp Atlanta, GA Saturday,

    March 15th, 2014 Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
  3. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Suzette Franck with a “ck” @mt_Suzette
  4. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Suzette Franck with a “ck” @mt_Suzette ★WordPress Evangelist @ Media Temple
  5. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Suzette Franck with a “ck” @mt_Suzette ★WordPress Evangelist @ Media Temple ★Born in Hollywood, resides in So. California
  6. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Suzette Franck with a “ck” @mt_Suzette ★WordPress Evangelist @ Media Temple ★Born in Hollywood, resides in So. California ★20 Years Coding & Web Development
  7. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Suzette Franck with a “ck” @mt_Suzette ★WordPress Evangelist @ Media Temple ★Born in Hollywood, resides in So. California ★20 Years Coding & Web Development ★Developed over 200 WordPress sites
  8. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Suzette Franck with a “ck” @mt_Suzette ★WordPress Evangelist @ Media Temple ★Born in Hollywood, resides in So. California ★20 Years Coding & Web Development ★Developed over 200 WordPress sites ★2013: 12 WordCamps, 8 states, 2 countries
  9. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Suzette Franck with a “ck” @mt_Suzette ★WordPress Evangelist @ Media Temple ★Born in Hollywood, resides in So. California ★20 Years Coding & Web Development ★Developed over 200 WordPress sites ★2013: 12 WordCamps, 8 states, 2 countries ★WordPress Podcast: WPgirlieshow.com
  10. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Suzette Franck with a “ck” @mt_Suzette ★WordPress Evangelist @ Media Temple ★Born in Hollywood, resides in So. California ★20 Years Coding & Web Development ★Developed over 200 WordPress sites ★2013: 12 WordCamps, 8 states, 2 countries ★WordPress Podcast: WPgirlieshow.com ★Reg. Contributor: WPwatercooler.com
  11. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Suzette Franck with a “ck” @mt_Suzette ★WordPress Evangelist @ Media Temple ★Born in Hollywood, resides in So. California ★20 Years Coding & Web Development ★Developed over 200 WordPress sites ★2013: 12 WordCamps, 8 states, 2 countries ★WordPress Podcast: WPgirlieshow.com ★Reg. Contributor: WPwatercooler.com ★Blogs at: suzettefranck.com
  12. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Suzette Franck with a “ck” @mt_Suzette ★WordPress Evangelist @ Media Temple ★Born in Hollywood, resides in So. California ★20 Years Coding & Web Development ★Developed over 200 WordPress sites ★2013: 12 WordCamps, 8 states, 2 countries ★WordPress Podcast: WPgirlieshow.com ★Reg. Contributor: WPwatercooler.com ★Blogs at: suzettefranck.com ★Slides: speakerdeck.com/suzettefranck
  13. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple My Silly Assumptions
  14. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★You’re familiar with writing CSS My Silly Assumptions
  15. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★You’re familiar with writing CSS ★You’re interested in theme development My Silly Assumptions
  16. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★You’re familiar with writing CSS ★You’re interested in theme development ★You think WordPress is pretty awesome My Silly Assumptions
  17. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★You’re familiar with writing CSS ★You’re interested in theme development ★You think WordPress is pretty awesome ★You know how to use Google My Silly Assumptions
  18. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★You’re familiar with writing CSS ★You’re interested in theme development ★You think WordPress is pretty awesome ★You know how to use Google ★You’re probably pretty smart already My Silly Assumptions
  19. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple My Goal...
  20. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Teach you at least one thing you can put into practice right away! My Goal...
  21. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Sass For Web Designers by Dan Cederholm
  22. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What is Sass? Syntactically Awesome Style Sheets
  23. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple sass-lang.com
  24. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Sass Basics
  25. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Sass is a CSS pre-processor, outputs .CSS from .SCSS file Sass Basics
  26. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Sass is a CSS pre-processor, outputs .CSS from .SCSS file ★Sass is a Ruby “Gems” or Application Sass Basics
  27. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Sass is a CSS pre-processor, outputs .CSS from .SCSS file ★Sass is a Ruby “Gems” or Application ★Gems need to be installed once on your computer Sass Basics
  28. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Sass is a CSS pre-processor, outputs .CSS from .SCSS file ★Sass is a Ruby “Gems” or Application ★Gems need to be installed once on your computer ★World of pre-made additions (mixins) and other resources Sass Basics
  29. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Sass is a CSS pre-processor, outputs .CSS from .SCSS file ★Sass is a Ruby “Gems” or Application ★Gems need to be installed once on your computer ★World of pre-made additions (mixins) and other resources ★Two flavors: .SCSS (Sassy CSS) & .SASS Sass Basics
  30. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Sass is a CSS pre-processor, outputs .CSS from .SCSS file ★Sass is a Ruby “Gems” or Application ★Gems need to be installed once on your computer ★World of pre-made additions (mixins) and other resources ★Two flavors: .SCSS (Sassy CSS) & .SASS ★.SCSS most closely resembles .CSS in syntax Sass Basics
  31. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple thesassway.com/beginner/ getting-started-with-sass-and-compass @adamstac by Adam Stacoviak
  32. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Sassmeister.com
  33. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Sass FTW, but Why?
  34. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Backwards Compatible with all versions CSS Sass FTW, but Why?
  35. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Backwards Compatible with all versions CSS ★Fills holes in CSS: variables to represent values Sass FTW, but Why?
  36. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Backwards Compatible with all versions CSS ★Fills holes in CSS: variables to represent values ★Calculates values: colors, lengths Sass FTW, but Why?
  37. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Backwards Compatible with all versions CSS ★Fills holes in CSS: variables to represent values ★Calculates values: colors, lengths ★Bubbles up: Media Queries can be written within their element Sass FTW, but Why?
  38. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Backwards Compatible with all versions CSS ★Fills holes in CSS: variables to represent values ★Calculates values: colors, lengths ★Bubbles up: Media Queries can be written within their element ★Supports Advanced Logic/if..then, while, else, etc. Sass FTW, but Why?
  39. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Backwards Compatible with all versions CSS ★Fills holes in CSS: variables to represent values ★Calculates values: colors, lengths ★Bubbles up: Media Queries can be written within their element ★Supports Advanced Logic/if..then, while, else, etc. ★Adopted by WordPress Core team & GPL Compatible* Sass FTW, but Why? * Reference: http://wptavern.com/wordpress-core-adopts-sass-css-preprocessor
  40. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Efficient? How?
  41. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★When writing code: DRY Don’t Repeat Yourself! Efficient? How?
  42. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★When writing code: DRY Don’t Repeat Yourself! ★Reduces HTTP requests with multiple stylesheets @import Efficient? How?
  43. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★When writing code: DRY Don’t Repeat Yourself! ★Reduces HTTP requests with multiple stylesheets @import ★Helps you write more advanced code faster Efficient? How?
  44. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★When writing code: DRY Don’t Repeat Yourself! ★Reduces HTTP requests with multiple stylesheets @import ★Helps you write more advanced code faster ★Cleaner, easier to read once you are familiar Efficient? How?
  45. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★When writing code: DRY Don’t Repeat Yourself! ★Reduces HTTP requests with multiple stylesheets @import ★Helps you write more advanced code faster ★Cleaner, easier to read once you are familiar ★Using variable, make site-wide changes in fewer places Efficient? How?
  46. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★When writing code: DRY Don’t Repeat Yourself! ★Reduces HTTP requests with multiple stylesheets @import ★Helps you write more advanced code faster ★Cleaner, easier to read once you are familiar ★Using variable, make site-wide changes in fewer places ★4 output styles can be chosen depending on goals Efficient? How?
  47. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Output Styles
  48. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Nested (default) Output Styles
  49. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Nested (default) ★Expanded (closest to hand-crafted CSS) Output Styles
  50. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Nested (default) ★Expanded (closest to hand-crafted CSS) ★Compact (saves space) Output Styles
  51. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Nested (default) ★Expanded (closest to hand-crafted CSS) ★Compact (saves space) ★Compressed (saves most space, minified) Output Styles
  52. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Nested (default) ★Expanded (closest to hand-crafted CSS) ★Compact (saves space) ★Compressed (saves most space, minified) ★Output style can be specified in your config.rb Output Styles
  53. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Example config.rb
  54. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Are Sass Files Hard to Create? Rename your .css file with an .scss extension!
  55. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ALRIGHTY... Ready For Some .SCSS Code?
  56. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Wolf Starter Theme by Brad Parbs https://github.com/bradp/Wolf
  57. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Comments in Sass `
  58. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple @import
  59. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Modularize your CSS into separate pages or partials @import
  60. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Modularize your CSS into separate pages or partials ★Re-use your favorite mixins on all of your projects @import
  61. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Modularize your CSS into separate pages or partials ★Re-use your favorite mixins on all of your projects ★Compiled into one .css file at end @import
  62. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Modularize your CSS into separate pages or partials ★Re-use your favorite mixins on all of your projects ★Compiled into one .css file at end ★Fewer HTTP requests - performance! @import
  63. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Modularize your CSS into separate pages or partials ★Re-use your favorite mixins on all of your projects ★Compiled into one .css file at end ★Fewer HTTP requests - performance! ★Import others’ mixins and use them @import
  64. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple @import Note: .scss is appended to end of filename
  65. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Nesting All The Things
  66. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Repeated selectors are nested inside curly braces Nesting All The Things
  67. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Repeated selectors are nested inside curly braces ★& is a placeholder for the parent selector Nesting All The Things
  68. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Repeated selectors are nested inside curly braces ★& is a placeholder for the parent selector ★Namespaces can also be nested, ie font, background Nesting All The Things
  69. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Repeated selectors are nested inside curly braces ★& is a placeholder for the parent selector ★Namespaces can also be nested, ie font, background ★Compiled CSS will always be more verbose Nesting All The Things
  70. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Nesting Selectors .SCSS .CSS
  71. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Repeated namespaces are nested inside the curly braces ★Use with font, background, etc. Nesting Namespaces .SCSS .CSS
  72. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple $variables
  73. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Variables for CSS! $variables
  74. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Variables for CSS! ★Declare in your .SCSS file like $name: value $variables
  75. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Variables for CSS! ★Declare in your .SCSS file like $name: value ★Call by $name $variables
  76. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Variables for CSS! ★Declare in your .SCSS file like $name: value ★Call by $name ★Ability to change variables in one place $variables
  77. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Variables for CSS! ★Declare in your .SCSS file like $name: value ★Call by $name ★Ability to change variables in one place ★Useful for defining hex colors / creating a style guide $variables
  78. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Variables for CSS! ★Declare in your .SCSS file like $name: value ★Call by $name ★Ability to change variables in one place ★Useful for defining hex colors / creating a style guide ★Don’t forget 140 color names in CSS3! (Google it) $variables
  79. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple $variables .SCSS .CSS
  80. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple @mixin
  81. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Macros for CSS! @mixin
  82. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Macros for CSS! ★Re-usable blocks of styles @mixin
  83. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Macros for CSS! ★Re-usable blocks of styles ★Define with @mixin declaration @mixin
  84. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Macros for CSS! ★Re-usable blocks of styles ★Define with @mixin declaration ★Call with @include @mixin
  85. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Macros for CSS! ★Re-usable blocks of styles ★Define with @mixin declaration ★Call with @include ★Useful for CSS3 Vendor Prefixes @mixin
  86. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Macros for CSS! ★Re-usable blocks of styles ★Define with @mixin declaration ★Call with @include ★Useful for CSS3 Vendor Prefixes ★Powerful with arguments @mixin
  87. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Macros for CSS! ★Re-usable blocks of styles ★Define with @mixin declaration ★Call with @include ★Useful for CSS3 Vendor Prefixes ★Powerful with arguments ★Many pre-made mixins you can use in community @mixin
  88. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Finally! Macros for CSS! ★Re-usable blocks of styles ★Define with @mixin declaration ★Call with @include ★Useful for CSS3 Vendor Prefixes ★Powerful with arguments ★Many pre-made mixins you can use in community ★Compass, Bourbon, GitHub, Your Own Library @mixin
  89. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple @mixin .SCSS .CSS
  90. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Mixins with Arguments .SCSS .CSS
  91. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Color Functions
  92. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★darken, lighten, adjust-hue, saturate, desaturate Color Functions
  93. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★darken, lighten, adjust-hue, saturate, desaturate ★Full list at: http://sass-lang.com/documentation/Sass/Script/ Functions.html Color Functions
  94. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★darken, lighten, adjust-hue, saturate, desaturate ★Full list at: http://sass-lang.com/documentation/Sass/Script/ Functions.html ★Hexidecimal # is calculated & output in final CSS Color Functions
  95. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Sass Color Functions .SCSS .CSS
  96. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple http://sassme.arc90.com/
  97. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Other Resources
  98. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Brad Parbs Sass talks on WordPress.tv Other Resources
  99. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Brad Parbs Sass talks on WordPress.tv ★Chris Coyier’s website css-tricks.com Other Resources
  100. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ★Brad Parbs Sass talks on WordPress.tv ★Chris Coyier’s website css-tricks.com ★mashable.com/2013/06/11/sass-compass-tools Other Resources
  101. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple SO... Who is going to experiment with Sass?
  102. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Did you learn at least one thing you can put into practice right away?
  103. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Do you have any questions?
  104. Thank you for being here! Follow Me on Twitter! Suzette

    Franck [email protected] https://speakerdeck.com/suzettefranck @mt_Suzette