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.

Transcript

1. Ken Collins, April 8th 2014 Metaprogramming Sass 1
3. HomeMarks v3 3
4. HomeMarks v3 4
5. HomeMarks v3 5
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;