Slide 1

Slide 1 text

Ken Collins, April 8th 2014 Metaprogramming Sass 1

Slide 2

Slide 2 text

2

Slide 3

Slide 3 text

HomeMarks v3 3

Slide 4

Slide 4 text

HomeMarks v3 4

Slide 5

Slide 5 text

HomeMarks v3 5

Slide 6

Slide 6 text

6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

9 v3.3

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Other Great Sass Features 15

Slide 22

Slide 22 text

Other Great Sass Features • Nesting 15

Slide 23

Slide 23 text

Other Great Sass Features • Nesting • Imports & Partials 15

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

16 programming

Slide 31

Slide 31 text

Frameworks @mixin-it-up 17

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

20 Frameworks @mixin-it-up programming

Slide 38

Slide 38 text

21 programming

Slide 39

Slide 39 text

21 programming

Slide 40

Slide 40 text

Metaprogramming Tools 22

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

23 Data

Slide 46

Slide 46 text

24 @each

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

34 programming

Slide 57

Slide 57 text

34 programming

Slide 58

Slide 58 text

libSass 35 http://libsass.org

Slide 59

Slide 59 text

36 Restate The Problem sassmeister.com/gist/10007798

Slide 60

Slide 60 text

36 Restate The Problem sassmeister.com/gist/10007798

Slide 61

Slide 61 text

37 Our Goal sassmeister.com/gist/10007931

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

40 Selector To Placeholders sassmeister.com/gist/10012970

Slide 65

Slide 65 text

41 Restate The Problem sassmeister.com/gist/10007798

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

What Just Happened? 44

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Related Reading 45

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

TheSassWay.com (soon) 46

Slide 80

Slide 80 text

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