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

Metaprogramming Sass

Metaprogramming Sass

With the release of Sass v3.3, we can now author CSS using new levels of sophisticated programming techniques. Join me in an academic dive into some new ways to meta program using pure Sass script. We will explore how existing frameworks solve hard problems and expose critical next level building blocks for your new projects.

This talk will start from the ground up, so fear not! Even if you are new to Sass or programming in general, we will make sure to explain it all as we go.

F0b14b7dbae1e90259eb946d1c841a17?s=128

Ken Collins

April 07, 2014
Tweet

Transcript

  1. Ken Collins, April 8th 2014 Metaprogramming Sass 1

  2. 2

  3. HomeMarks v3 3

  4. HomeMarks v3 4

  5. HomeMarks v3 5

  6. 6

  7. http://sassmeister.com/ The Sass Playground! 7

  8. The Sass Playground! 8 http://sassmeister.com/

  9. 9 v3.3

  10. 10 Sass 101 - Variables sassmeister.com/gist/9877283

  11. 11 Sass 101 - Mixins sassmeister.com/gist/14e2a253b530e69310ff

  12. 11 Sass 101 - Mixins sassmeister.com/gist/14e2a253b530e69310ff

  13. 11 Sass 101 - Mixins sassmeister.com/gist/14e2a253b530e69310ff

  14. 12 Sass 101 - Placeholder Selectors sassmeister.com/gist/9880916

  15. 12 Sass 101 - Placeholder Selectors sassmeister.com/gist/9880916

  16. 12 Sass 101 - Placeholder Selectors sassmeister.com/gist/9880916

  17. 12 Sass 101 - Placeholder Selectors sassmeister.com/gist/9880916

  18. 13 Sass 101 - Placeholder Selectors sassmeister.com/gist/9880916

  19. 13 Sass 101 - Placeholder Selectors sassmeister.com/gist/9880916 Failing To Extend

    A Placeholder Class Generates No Content!!!
  20. 14 Sass 101 - Functions sassmeister.com/gist/9879488

  21. Other Great Sass Features 15

  22. Other Great Sass Features • Nesting 15

  23. Other Great Sass Features • Nesting • Imports & Partials

    15
  24. Other Great Sass Features • Nesting • Imports & Partials

    • Operators 15
  25. Other Great Sass Features • Nesting • Imports & Partials

    • Operators • String Interpolation 15
  26. Other Great Sass Features • Nesting • Imports & Partials

    • Operators • String Interpolation • Control Directives 15
  27. Other Great Sass Features • Nesting • Imports & Partials

    • Operators • String Interpolation • Control Directives • Parent Selectors With “&” 15
  28. Other Great Sass Features • Nesting • Imports & Partials

    • Operators • String Interpolation • Control Directives • Parent Selectors With “&” • Data Structures (lists, maps, etc.) 15
  29. Other Great Sass Features • Nesting • Imports & Partials

    • Operators • String Interpolation • Control Directives • Parent Selectors With “&” • Data Structures (lists, maps, etc.) • Content Blocks (think yield w/ruby) 15
  30. 16 programming

  31. Frameworks @mixin-it-up 17

  32. 18 Foundation (alert) sassmeister.com/gist/9905970

  33. 18 Foundation (alert) sassmeister.com/gist/9905970

  34. 18 Foundation (alert) sassmeister.com/gist/9905970

  35. 19 Bitters (flash) sassmeister.com/gist/9907080

  36. 19 Bitters (flash) sassmeister.com/gist/9907080

  37. 20 Frameworks @mixin-it-up programming

  38. 21 programming

  39. 21 programming

  40. Metaprogramming Tools 22

  41. Metaprogramming Tools • @each –Process data into executable code. 22

  42. Metaprogramming Tools • @each –Process data into executable code. •

    %placeholder-selectors –Presentation & semantic framework. 22
  43. Metaprogramming Tools • @each –Process data into executable code. •

    %placeholder-selectors –Presentation & semantic framework. • @function –Our own implementation helpers. 22
  44. Metaprogramming Tools • @each –Process data into executable code. •

    %placeholder-selectors –Presentation & semantic framework. • @function –Our own implementation helpers. • @mixin –When absolutely needed. 22
  45. 23 Data

  46. 24 @each

  47. 25 @each - With Selector sassmeister.com/gist/9999027

  48. 26 @each - With Selector sassmeister.com/gist/9999027

  49. 27 @each - With Mixin sassmeister.com/gist/10006187

  50. 28 @each - With Mixin sassmeister.com/gist/10006187

  51. 29 @each - With Placeholder sassmeister.com/gist/10006365

  52. 30 @each - With Placeholder sassmeister.com/gist/10006365

  53. 31 @each - With Placeholder sassmeister.com/gist/10006365

  54. 32 @each - With Placeholder sassmeister.com/gist/10006365

  55. 33 @each - With Placeholder sassmeister.com/gist/10006365

  56. 34 programming

  57. 34 programming

  58. libSass 35 http://libsass.org

  59. 36 Restate The Problem sassmeister.com/gist/10007798

  60. 36 Restate The Problem sassmeister.com/gist/10007798

  61. 37 Our Goal sassmeister.com/gist/10007931

  62. 38 String Sub & Template Functions sassmeister.com/gist/10008294

  63. 39 String Sub & Template Functions sassmeister.com/gist/10008294

  64. 40 Selector To Placeholders sassmeister.com/gist/10012970

  65. 41 Restate The Problem sassmeister.com/gist/10007798

  66. 42 Restate The Problem (solved) sassmeister.com/gist/10013452

  67. 43 Restate The Problem (solved) sassmeister.com/gist/10013452

  68. What Just Happened? 44

  69. What Just Happened? • We turned a Sass map into

    executable framework code using placeholder selectors. 44
  70. What Just Happened? • We turned a Sass map into

    executable framework code using placeholder selectors. • We then extended Sass with Sass and gave it new string behaviors. 44
  71. What Just Happened? • We turned a Sass map into

    executable framework code using placeholder selectors. • We then extended Sass with Sass and gave it new string behaviors. • Using these tools, we wrote a Sass mixin to use all that Sass! 44
  72. What Just Happened? • We turned a Sass map into

    executable framework code using placeholder selectors. • We then extended Sass with Sass and gave it new string behaviors. • Using these tools, we wrote a Sass mixin to use all that Sass! 44
  73. What Just Happened? • We turned a Sass map into

    executable framework code using placeholder selectors. • We then extended Sass with Sass and gave it new string behaviors. • Using these tools, we wrote a Sass mixin to use all that Sass! 44
  74. Related Reading 45

  75. Related Reading • Advanced String Handling For Sass
 https://github.com/Team-Sass/Sassy-Strings 45

  76. Related Reading • Advanced String Handling For Sass
 https://github.com/Team-Sass/Sassy-Strings •

    Advanced Sass List Manipulation
 https://github.com/Team-Sass/SassyLists 45
  77. Related Reading • Advanced String Handling For Sass
 https://github.com/Team-Sass/Sassy-Strings •

    Advanced Sass List Manipulation
 https://github.com/Team-Sass/SassyLists • OOCSS + Sass = The best way to CSS
 http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/ 45
  78. Related Reading • Advanced String Handling For Sass
 https://github.com/Team-Sass/Sassy-Strings •

    Advanced Sass List Manipulation
 https://github.com/Team-Sass/SassyLists • OOCSS + Sass = The best way to CSS
 http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/ • Defending Presentational Class Names
 http://tympanus.net/codrops/2013/01/22/defending-presentational- class-names/ 45
  79. TheSassWay.com (soon) 46

  80. Ken Collins, CustomInk.com - @MetaSkills 47 @extend %your-skills;