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
   

   View Slide

2. View Slide

3. HomeMarks v3
   3
   

   View Slide

4. HomeMarks v3
   4
   

   View Slide

5. HomeMarks v3
   5
   

   View Slide

6. View Slide

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

   View Slide

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

   View Slide

9. 9
   v3.3
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

19. 13
    Sass 101 - Placeholder Selectors
    sassmeister.com/gist/9880916
    Failing To Extend
    A Placeholder
    Class Generates
    No Content!!!
    

    View Slide

20. 14
    Sass 101 - Functions
    sassmeister.com/gist/9879488
    

    View Slide

21. Other Great Sass Features
    15
    

    View Slide

22. Other Great Sass Features
    • Nesting
    15
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

30. 16
    programming
    

    View Slide

31. Frameworks @mixin-it-up
    17
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

37. 20
    Frameworks @mixin-it-up
    programming
    

    View Slide

38. 21
    programming
    

    View Slide

39. 21
    programming
    

    View Slide

40. Metaprogramming Tools
    22
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

45. 23
    Data
    

    View Slide

46. 24
    @each
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

56. 34
    programming
    

    View Slide

57. 34
    programming
    

    View Slide

58. libSass
    35
    http://libsass.org
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

68. What Just Happened?
    44
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

74. Related Reading
    45
    

    View Slide

75. Related Reading
    • Advanced String Handling For Sass

    https://github.com/Team-Sass/Sassy-Strings
    45
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

79. TheSassWay.com (soon)
    46
    

    View Slide

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

    View Slide