Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting Sassy with CSS

3,832 views

Published on

I don't know about you, but vanilla CSS always leaves me wanting more. It's a fairly simple language, can do some pretty powerful things, but after a while.. well, it can become rather tedious to work with. Enter Sass: Syntactically Awesome Stylesheets. Sass is a CSS meta-language and precompiler that makes the prettification of your website a breeze by adding invaluable features of more traditional programming languages. In this session, we'll jump right in to the Sass workflow and cover all the key game changers - nesting, variables, mixins, inheritance, and directives. We'll also cover some of the gotchyas, tools and extensions, and tips for organization and coding standards.

Prepared for self.conference at COBO Hall in Detroit, Michigan on May 30, 2014.
Updated for CodeMash January 2015.
Updated for Detroit Craftsman Guild March 2016.

Published in: Technology
  • Be the first to comment

Getting Sassy with CSS

  1. 1. Getting Sassy with CSS Julie Cameron @jewlofthelotus #SassyCSS bit.ly/getting-sassy
  2. 2. DERP.
  3. 3. I <3 PAIR PROGRAMMING
  4. 4. Syntactically Awesome Stylesheets
  5. 5. NOT an acronym… Syntactically Awesome Stylesheets
  6. 6. NOT SASS dot com
  7. 7. “If you see something, say something. Only you can prevent overcapitalization.” Hampton Catlin, Creator Of Sass
  8. 8. Just don’t be a #Sasshole about it. :)
  9. 9. Welcome to the Sass community!!
  10. 10. What Is Sass? 1. An extension of CSS SassScript Language. Fully CSS-compatible syntax.
  11. 11. What Is Sass? 1. An extension of CSS SassScript Language. Fully CSS-compatible syntax. 2. A CSS preprocessor SassScript MAGIC CSS
  12. 12. Where Did Sass Come From? • 2007: Designed by Hampton Catlin (Haml) • Developed by Chris Eppstein (Compass) and Natalie Weizenbaum
  13. 13. Why Did They Make Sass? Because vanilla CSS just wasn’t cutting it any more.
  14. 14. Bert Bos, CSS Co-Inventor CSS stops short of even more powerful features […]. That is because these things give power-users a lot of rope, but less experienced users will unwittingly hang themselves; or, more likely, be so scared that they won’t even touch CSS. “
  15. 15. What Does Sass Give Us That CSS Doesn’t? • Nesting • Imports • Variables • Mixins • Inheritance • Functions • Loops • AWESOME
  16. 16. What Does Sass Give Us That CSS Doesn’t? • Reduced Repetition • Cleaner Modularity • Maintainability • Scalability • REAL PROGRAMMING!
  17. 17. Setup & Workflow
  18. 18. Sass Installation Ruby OS X? Lucky you, it’s preinstalled! Windows? Try RubyInstaller. Sass $ gem install sass
  19. 19. Sass Installation LibSass (C/C++) sass-lang.com/libsass
  20. 20. Compiling Sass Sass CSS $ sass source.sass output.css $ sass source_dir output_dir MAGIC
  21. 21. Sass Is Watching You $ sass —-watch source.sass:output.css This is the best thing. Ever. Gotchya: Colon vs. Space
  22. 22. Two Sass Syntaxes Sassy CSS .scss Default; Valid CSS == Valid SCSS Indented .sass Original syntax; Haml-esque
  23. 23. The Good Stuff Or, Why You’ll Never Write Plain Old CSS Again.
  24. 24. NESTING
  25. 25. Nesting HTML has a clear hierarchy - elements are nested. We can apply the same concept in Sass. HTML Sass
  26. 26. Nesting Output MAGIC Sass CSS
  27. 27. Nesting Gotchya Mirroring HTML nesting is SUPER easy. MAGIC? Overly verbose and overly specific. General Rule: No more than 2-3 levels deep Sass CSS
  28. 28. Nesting The Parent Selector You can reference parent selector(s) with an & MAGIC Sass CSS
  29. 29. Nesting The Parent Selector The & can follow other selectors, too! MAGIC Sass CSS
  30. 30. Sass Nesting The Parent Selector You can also append a suffix to the &! MAGIC CSS
  31. 31. Nesting Media Queries MAGIC THIS IS FREAKING AWESOME. Sass CSS Note: Matching media queries will not group together in the output.
  32. 32. IMPORTS AND ORGANIZATION
  33. 33. Imports CSS @import has always meant an extra file download. Sass (application.scss) Sass modifies @import to instead include the resource during compilation, rather than on the client side.
  34. 34. Imports File Structure • project_awesome • sass • lib • fontawesome.scss • base.scss • grid.scss • application.scss • css Sass
  35. 35. Imports File Structure • project_awesome • sass • lib • fontawesome.scss • base.scss • grid.scss • application.scss • css $ sass sass/application.scss css/application.css Sass
  36. 36. Imports File Structure • project_awesome • sass • lib • fontawesome.scss • base.scss • grid.scss • application.scss • css $ sass sass/application.scss css/application.css Sass • application.css
  37. 37. Imports File Structure • project_awesome • sass • lib • fontawesome.scss • base.scss • grid.scss • application.scss $ sass sass/ css/
  38. 38. Imports File Structure • project_awesome • sass • lib • fontawesome.scss • base.scss • grid.scss • application.scss $ sass sass/ css/ • project_awesome • css • lib • fontawesome.css • base.css • grid.css • application.css MAGIC
  39. 39. Import Partials • project_awesome • sass • lib • _fontawesome.scss • _base.scss • _grid.scss • application.scss • print.css $ sass sass/ css/
  40. 40. Import Partials • project_awesome • sass • lib • _fontawesome.scss • _base.scss • _grid.scss • application.scss • print.css $ sass sass/ css/ MAGIC • project_awesome • sass • … • css • application.css • print.css
  41. 41. VARIABLES
  42. 42. Variables WTF is #531946? #30162b? #095179? WAT?
  43. 43. Variables Variables let you reuse single values. Sass
  44. 44. Variable Uses colors font sizes font families font paths padding margins breakpoints border-radius pseudo content shadows gradients SELECTORS! LOGIC! ALL THE THINGS!!!1!
  45. 45. Variable Data Types Numbers Strings Colors Lists Booleans Null Maps Sass
  46. 46. Variable Dynamics • Mutable. • Can be interpolated. • Have scopes. Sass
  47. 47. MATH+ COLOR
  48. 48. Math • + addition • - subtraction • * multiplication • / division • % modulus Sass gives us basic math operations. Sass SassyCSS
  49. 49. Math Functions • abs($num) - absolute value • ceil($num) - round up to closest whole number • floor($num) - round down to closest whole number • percentage($num) - convert to percentage • round($num) - round to closest whole number • max($list) - maximum list value • min($list) - minimum list value Sass comes with a set of math functions.
  50. 50. Color Math We can even use math to manipulate colors. Sass
  51. 51. Color Functions • rgba($hex, $alpha) • lighten($color, $percent) • darken($color, $percent) • saturate($color, $percent) • desaturate($color, $percent) • mix($color1, $color2) • grayscale($color) • invert($color) • complement($color) • AND MANY MORE! Sass comes with AWESOME color functions. http://sassme.arc90.com
  52. 52. MIXINS
  53. 53. Mixins Variables let you reuse single values Mixins let you reuse blocks of styles
  54. 54. Mixins Use CSS Sass Mixins output their contents where they are called.
  55. 55. Mixin Output Mixin Features • argument defaults • multiple arguments • optional arguments M AGIC CSS Sass
  56. 56. Mixin Alternative? Grouped OutputCSS
  57. 57. @EXTEND INHERITANCE
  58. 58. @extend Lets you group selectors and styles together MAGIC Sass CSS
  59. 59. Placeholders Placeholders can be @extended but will never compile to the CSS on their own MAGIC Sass CSS
  60. 60. Plus Lots More WIN
  61. 61. Functions
  62. 62. Conditions extra-light
  63. 63. Each Loops
  64. 64. For Loops
  65. 65. While Loops
  66. 66. Maps Key-value pairs. • Multiple assignment in loops. • Lots of helper methods.
  67. 67. Demo Time https://github.com/roytomeij/sassconf
  68. 68. Resources Sass-Lang.com The Sass Way Sass For Web Designers Assembling Sass SassNews Newsletter SassConf SassConf 2013 Videos SassMeister Sass Style Guide #teamSass
  69. 69. Closing Tips • Take it one step at a time. • Keep an eye on your output. • Don’t nest too deeply. • Mind your @mixins and @media queries. • Careful with your @extends. • Modularize all the things.
  70. 70. <3
  71. 71. Thank You! Getting Sassy with CSS #SassyCSS bit.ly/getting-sassy Questions?

×