Advanced Sass topics for the Atlanta Drupal User's Group.

1. SasstronautsAdvanced Sass Usage, Plugins, Mixins, Tips, Tricks
Atlanta Drupal User’s Group - April 2015
Eric Scott Sembrat - Georgia Institute of Technology

3. Our Mission Plan0
The prime directive in the short time we have here.

5. 1. Mission Control: Sass as it Stands Today
3. Duct tape: Plugins & Must-Haves
4. Sassineering: Mixins & Libraries
5. Forecast: The Future of Sass
6. Docking: Drupal Support
2. Blueprints: Architecting Sass Projects

6. Remember SyntaxATTN
http://sassnotsass.com/

7. Play with Sass Today!ATTN
http://sassmeister.com/

8. Atlanta Tech Chatstech404
http://tech404.io/

10. Introductions0
A little personal information, before all the sass.

12. Eric Sembrat
Web Manager - College of Engineering - Georgia Tech
Graduate Student - Learning Technologies - Georgia State
Nerd Extraordinaire

13. Eric Sembrat
Web Manager - College of Engineering - Georgia Tech
Graduate Student - Learning Technologies - Georgia State
Nerd Extraordinaire
@esembrat
Tweet at me, bro.

14. Eric Sembrat
Web Manager - College of Engineering - Georgia Tech
Graduate Student - Learning Technologies - Georgia State
Nerd Extraordinaire
http://www.ericembrat.com
Learn more!
@esembrat
Tweet at me, bro.

16. Mission Control1
The state of the Sass Mission in 2015.

17. 2015 Galactic Report Card

18. 2015 Galactic Report Card

19. 2015 Galactic Report Card
(no pressure)

20. 2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass

21. 2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass

22. 2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass

23. Release Details3.3
Data structures, ahoy!
Sass Maps
Giving power to browsers.
CSS Source Maps
SMACSS, BEM, OOCSS.
Suffix Class Support
Squashing those issues.
Bug Fixes

24. $map: (key1: value1, key2: value2, key3: value3);
$gt-color-map:
(gold: #EEB221,
navy: #023d7b,
oldgold: #C59353);
@each $ref, $bgcolor in $gt-color-map {
.class-name-#{$ref} {
background: $bgcolor;
}
}
.class-name-gold {
background: #EEB221;
}

25. For preprocessors that support CSS source maps (like Sass), DevTools
lets you live-edit your preprocessor source files in the Sources
panel, and view the results without having to leave DevTools or
refresh the page. When you inspect an element whose styles are
provided by a generated CSS file, the Elements panel displays a
link to the original source file, not the generated .css file.

26. 2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass

27. 2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass

28. Release Details3.4
Programmatically selected!
Selector Functions
Power to the &.
SassScript Update
All the new colors.
Color Updates
Squashing those issues.
Bug Fixes

29. You have a function to do anything you
want; whether it be appending a
selector to another selector, nesting
a selector under another selector,
replacing a selector within another
selector, unifying selectors, and
more.
selector-append()
selector-nest()
selector-extend()
selector-replace()
selector-unify()
selector-parse()
is-superselector()
simple-selectors()
“

30. 2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass

31. 2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass

34. Initiative to port Sass to a more flexible platform.
Mostly compatible with Ruby Sass today, with a few quirks and missing features.
3.0
3.1
3.2
3.3
3.4
Most basic Sass implementations & functions.
All basic specs match Ruby Sass 3.4.
All the edge case fixes.
Locating those last little issues.
Full library compatibility. Compass, here we come!

35. Initiative to port Sass to a more flexible platform.
Mostly compatible with Ruby Sass today, with a few quirks and missing features.
3.0
3.1
3.2
3.3
3.4
Most basic Sass implementations & functions.
All basic specs match Ruby Sass 3.4.
All the edge case fixes.
Locating those last little issues.
Full library compatibility. Compass, here we come!

37. Speedy Compilation
Web App Compatibility

38. Speedy Compilation
Web App Compatibility
Sticky syntax issues
Libraries support TBD
Edge functions WIP

39. Speedy Compilation
Web App Compatibility
Sticky syntax issues
Libraries support TBD
Edge functions WIP

40. 2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass

41. 2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass

42. 2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass

43. 2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass

44. 2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass

45. 2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass

47. Blueprints2
Designing your Sass / CSS infrastructure and architecture.

48. 3 CSS Organizational Architectures

49. 3 CSS Organizational Architectures
SMACSS
Stands for the Scalable and
Modular Architecture for CSS.
“SMACSS is a way to
examine your design
process and as a way
to fit those rigid
frameworks into a
flexible thought
process.”
OOCSS
Object-Oriented CSS
“… An approach for
writing CSS that’s fast,
maintainable, and
standards-based. It
adds much needed
predictability to CSS.”
Block, Element, Modifier.
“…A set of front-end
development techniques
and tools, that allow us
to build websites quickly
and maintain them over
a long time.”
BEM

50. .block__element—modifier

51. .block__element—modifier
Block, Element, Modifier.
“…A set of front-end
development techniques
and tools, that allow us
to build websites quickly
and maintain them over
a long time.”
BEM

52. .block__element—modifier
.person
.person__hand .person__foot

53. .block__element—modifier
.person
.person__hand .person__foot

54. .block__element—modifier
.person
.person__hand .person__foot
.person
.person__hand—ring .person—foot—heels

55. .block__element—modifier
.person
.person__hand .person__foot
.person
.person—female__hand .person—female__foot
.person {
color: red;
&__hand {
color: black;
&—ring {
color: purple;
}
}
}

56. .person—female
.block__element—modifier
.person
.person__hand .person__foot
.person {
color: red;
&__hand {
color: black;
&—ring {
color: purple;
}
}
}

57. .person—female
.block__element—modifier
.person
.person__hand .person__foot
.nav__list__item—active
.person {
color: red;
&__hand {
color: black;
&—ring {
color: purple;
}
}
}
.nav {
color: white;
&__list__item {
color: gold;
&—active {
color: blue;
}
}
}

58. SMACSS in Sass

59. SMACSS
Stands for the Scalable and
Modular Architecture for CSS.
“SMACSS is a way to
examine your design
process and as a way
to fit those rigid
frameworks into a
flexible thought
process.”
SMACSS in Sass

62. 5 Categorizations of CSS Rules
Base: Your single element selectors.
Layout: A section of your page (footer).
Module: A reusable part of your page (callouts, sidebar).
State: Statuses for modules, layouts (mobile, active).
Theme: Responsible for the look-and-feel.

63. How Sass Fits in
Mixins & Organization Galore

64. output.css
output.scss
_base.scss _layout.scss _module.scss _state.scss _theme.scss
/_base/* /_layout/* /_module/* /_state/* /_theme/*

65. output.css
output.scss
_base.scss _layout.scss _module.scss _state.scss _theme.scss
/_base/* /_layout/* /_module/* /_state/* /_theme/*Customized for your own project!

66. sass:
+gt:
_colors.scss
_config.scss
_fonts.scss
font-awesome:
[font-awesome files here]
mixin:
_example.scss
+includes:
_pages:
_theme:
font-awesome.scss
global.scss
gt-ckeditor.scss
partials:
_admin:
__example.scss
_pages:
__example.scss
_theme:
__example.scss

67. sass:
+gt:
_colors.scss
_config.scss
_fonts.scss
font-awesome:
[font-awesome files here]
mixin:
_example.scss
+includes:
_pages:
_theme:
font-awesome.scss
global.scss
gt-ckeditor.scss
partials:
_admin:
__example.scss
_pages:
__example.scss
_theme:
__example.scss

68. OOCSS in Sass

69. OOCSS in Sass
OOCSS
Object-Oriented CSS
“… An approach for
writing CSS that’s fast,
maintainable, and
standards-based. It
adds much needed
predictability to CSS.”

70. 2 Principles of OOCSS
Separate structure and skin.
Separate container and content.

71. Separate structure and skin.
Define repeating visual features as separate “skins” that you
can mix-and-match with your various objects to achieve a large
amount of visual variety without much code.
@mixin and @include to the rescue!

72. Separate container and content.
An object should look the same no matter where you put it.

73. Go Your Own Way

75. Duct Tape3
Must have plugins for Sassification.

76. Plugin
Mixin

77. Sass-Globbing: The Partial Whisperer
Adds the ability for Sass to have wildcard
partial importing from a directory.
Like CSS, importing follows an
alphanumerical ordering.
https://github.com/chriseppstein/sass-globbing

78. Breakpoint: Simple Media Queries
Demystifies and simplifies the process of
building media queries by allowing them
to be embedded into your Sass.
https://github.com/at-import/breakpoint
1. Define your media query:
$gt-width-tablet: 816px;
$query-tablet: (max-width $gt-width-tablet);
2. Use your media query:
.node .field-body {
float: left;
font-size: 12pt;
@include breakpoint($query-tablet){
float: none;
font-size: 20pt;
}
}

79. Breakpoint: Simple Media Queries
Demystifies and simplifies the process of
building media queries by allowing them
to be embedded into your Sass.
https://github.com/at-import/breakpoint
1. Define your media query:
$gt-width-tablet: 816px;
$query-tablet: (max-width $gt-width-tablet);
2. Use your media query:
.node .field-body {
float: left;
font-size: 12pt;
@include breakpoint($query-tablet){
float: none;
font-size: 20pt;
}
}

80. BEM Constructor: Speed up BEM!
Provides an easy avenue for defining,
extending, and standardizing BEM
formatting in a Sass project!
https://github.com/danielguillan/bem-constructor
“If constructing objects programmatically seems too verbose or abstract to
you that's perfectly OK. This tool is not for everybody.”
“However if you need to enforce a strict way of writing BEM objects in
your project, want to make sure they won't mutate and thus produce
more secure CSS, then this tool might help you.”

81. All of the Grids: Foundational Layouts!
Bootstrap, susy, Neat, singularity, and more!

82. All of the Grids: Foundational Layouts!
Bootstrap, susy, Neat, singularity, and more!

83. Compass: Too Big to Fail
Large plugin for Sass to provide typography,
CSS3, and Sass-helper utilities.
http://compass-style.org/

84. Bourbon: A Nice Cold Glass of CSS3
Compares as a lite version of Compass.
Bourbon handles CSS3, a few golden utilities
like a champ.
http://bourbon.io/

85. There’s a lot more.
But wait…

86. Sache: Sass Plugin Repository
http://www.sache.in/
Search through all accessible
and published Sass plugins.

87. Sache: Sass Plugin Repository
http://www.sache.in/
Search through all accessible
and published Sass plugins.

89. Sassineering4
Mixins are what makes Sass truly spicy.

90. @mixin colourText { color: #aaa; }

91. @include colourText();

92. @mixin colourText() {
@include colourTextBrown();
}

93. @mixin colourText($colour) {
color: $colour;
}

94. @mixin colourText($colour: #aaa) {
color: $colour;
}

95. @mixin colourText($colour: #aaa) {
color: $colour;
@if lightness($colour) < 50% {
@include text-shadow(0, 1, 0, #FFF);
}
@else {
@include text-shadow(0, 1, 0, #000);
}
}

96. @mixin colourText($colour: #aaa) {
color: $colour;
@if lightness($colour) < 50% {
@include text-shadow(0, 1, 0, #FFF);
}
@else {
@include text-shadow(0, 1, 0, #000);
}
}

97. @mixin colourText($colour: #aaa, $textShadow…) {
color: $colour;
@if lightness($colour) < 50% {
@include text-shadow(0, 1, 0, #FFF);
}
@else {
@include text-shadow(0, 1, 0, #000);
}
}

98. @mixin colourText($colour: #aaa, $textShadow…) {
color: $colour;
@if lightness($colour) < 50% {
@include text-shadow($textShadow);
}
@else {
@include text-shadow($textShadow);
}
}

99. @mixin colourText($colour: #aaa, $textShadow…) {
color: $colour;
@if lightness($colour) < 50% {
@include text-shadow($textShadow);
}
@else {
@include text-shadow($textShadow);
}
}

100. @mixin colourText($colour: #aaa, $textShadow…) {
color: $colour;
@if lightness($colour) < 50% {
@include text-shadow($textShadow);
}
@else {
@include text-shadow($textShadow);
}
}
Variable-length argument as data list.

101. @mixin colourText($colour: #aaa, $textShadow…) {
color: $colour;
@if lightness($colour) < 50% {
@include text-shadow($textShadow);
}
@else {
@include text-shadow($textShadow);
}
}

102. @mixin colourText($colour: #aaa, $textShadow…) {
color: $colour;
@if lightness($colour) < 50% {
@include text-shadow($textShadow);
}
@else {
@include text-shadow($textShadow);
}
}
Data list can be used for arguments.

103. $vars: (color: #aaa, textShadow: (0 0 1 #aaa, 0 0 -1 #fff);
@include colourText($vars);
@mixin colourText($colour: #aaa, $textShadow…) {
color: $colour;
@if lightness($colour) < 50% {
@include text-shadow($textShadow);
}
@else {
@include text-shadow($textShadow);
}
}

104. @include colourText() {
@include colourText();
}
Mixin Recursion3.3

106. Forecasting5
Where is Sass going in the future?

109. The next episode…4.0
1. Reject invalid function names.
2. Unitless/Unitful value comparison.
3. Allow auto ‘index’ file import from
folder.
4. One-time import library files.
https://github.com/sass/sass/milestones/4.0

110. The next episode…4.0
1. Reject invalid function names.
2. Unitless/Unitful value comparison.
3. Allow auto ‘index’ file import from
folder.
4. One-time import library files.
https://github.com/sass/sass/milestones/4.0
Let’s see what Camp Sass brings!

112. Docking6
How does Drupal support Sass? What about Drupal 8? 9? 10?

113. After an epic debate of Sass vs. LESS, it seems
that Sass has won out and will be adopted as
WordPress’ CSS preprocessor moving forward.

114. After an epic debate of Sass vs. LESS, it seems
that Sass has won out and will be adopted as
WordPress’ CSS preprocessor moving forward.

115. CSS Preprocessor libraries in core have not
been included.
8.x? 9.x? 10.x?

116. CSS Preprocessor libraries in core have not
been included.
8.x? 9.x? 10.x?

117. Most major theme frameworks in Drupal now
support CSS preprocessing via Sass.

118. SASS/SCSS Module
https://www.drupal.org/project/sass
1. Doesn’t support libSass.
2. Doesn’t use Library API.
3. Site shows no CSS if compile
fails.
4. Yelled SASS instead of
spelled Sass.
1. CSS Aggregation functionality.
2. Compiles Sass server-side.

119. Compass Module
https://www.drupal.org/project/compass
1. Forces user into Compass.
2. Doesn’t support libSass (?).
3. Doesn’t use Library API (?).
1. Compass support out of the
box.

120. Benefit of Sass Server Side?

123. Best bet: wait on libSass.

124. www.linkedin.com/in/ericsembrat/en
LinkedIn
@esembrat
Twitter
www.ericsembrat.com
Blog
Slides available online! Reach out to me with any questions.
Thanks for Attending!

125. www.linkedin.com/in/ericsembrat/en
LinkedIn
@esembrat
Twitter
www.ericsembrat.com
Blog
Slides available online! Reach out to me with any questions.
Thanks for Attending!