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;