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.

Ken Collins

April 07, 2014
Tweet

More Decks by Ken Collins

Other Decks in Technology

Transcript

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

    View Slide

  2. 2

    View Slide

  3. HomeMarks v3
    3

    View Slide

  4. HomeMarks v3
    4

    View Slide

  5. HomeMarks v3
    5

    View Slide

  6. 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