Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SasstronautsAdvanced Sass Usage, Plugins, Mixins, Tips, Tricks
Atlanta Drupal User’s Group - April 2015
Eric Scott Sembrat...
Our Mission Plan0
The prime directive in the short time we have here.
1. Mission Control: Sass as it Stands Today
3. Duct tape: Plugins & Must-Haves
4. Sassineering: Mixins & Libraries
5. Fore...
Remember SyntaxATTN
http://sassnotsass.com/
Play with Sass Today!ATTN
http://sassmeister.com/
Atlanta Tech Chatstech404
http://tech404.io/
Introductions0
A little personal information, before all the sass.
Eric Sembrat
Web Manager - College of Engineering - Georgia Tech
Graduate Student - Learning Technologies - Georgia State
...
Eric Sembrat
Web Manager - College of Engineering - Georgia Tech
Graduate Student - Learning Technologies - Georgia State
...
Eric Sembrat
Web Manager - College of Engineering - Georgia Tech
Graduate Student - Learning Technologies - Georgia State
...
Mission Control1
The state of the Sass Mission in 2015.
2015 Galactic Report Card
2015 Galactic Report Card
2015 Galactic Report Card
(no pressure)
2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass
2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass
2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass
Release Details3.3
Data structures, ahoy!
Sass Maps
Giving power to browsers.
CSS Source Maps
SMACSS, BEM, OOCSS.
Suffix Cl...
$map: (key1: value1, key2: value2, key3: value3);
$gt-color-map:
(gold: #EEB221,
navy: #023d7b,
oldgold: #C59353);
@each $...
For preprocessors that support CSS source maps (like Sass), DevTools
lets you live-edit your preprocessor source files in t...
2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass
2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass
Release Details3.4
Programmatically selected!
Selector Functions
Power to the &.
SassScript Update
All the new colors.
Col...
You have a function to do anything you
want; whether it be appending a
selector to another selector, nesting
a selector un...
2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass
2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass
Initiative to port Sass to a more flexible platform.
Mostly compatible with Ruby Sass today, with a few quirks and missing ...
Initiative to port Sass to a more flexible platform.
Mostly compatible with Ruby Sass today, with a few quirks and missing ...
Speedy Compilation
Web App Compatibility
Speedy Compilation
Web App Compatibility
Sticky syntax issues
Libraries support TBD
Edge functions WIP
Speedy Compilation
Web App Compatibility
Sticky syntax issues
Libraries support TBD
Edge functions WIP
2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass
2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass
2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass
2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass
2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass
2014 Release Strategy
Sass 3.3 (March 2014)
Sass 3.4 (August 2014)
libsass
Blueprints2
Designing your Sass / CSS infrastructure and architecture.
3 CSS Organizational Architectures
3 CSS Organizational Architectures
SMACSS
Stands for the Scalable and
Modular Architecture for CSS.
“SMACSS is a way to
ex...
.block__element—modifier
.block__element—modifier
Block, Element, Modifier.
“…A set of front-end
development techniques
and tools, that allow us
to b...
.block__element—modifier
.person
.person__hand .person__foot
.block__element—modifier
.person
.person__hand .person__foot
.block__element—modifier
.person
.person__hand .person__foot
.person
.person__hand—ring .person—foot—heels
.block__element—modifier
.person
.person__hand .person__foot
.person
.person—female__hand .person—female__foot
.person {
co...
.person—female
.block__element—modifier
.person
.person__hand .person__foot
.person {
color: red;
&__hand {
color: black;
&...
.person—female
.block__element—modifier
.person
.person__hand .person__foot
.nav__list__item—active
.person {
color: red;
&...
SMACSS in Sass
SMACSS
Stands for the Scalable and
Modular Architecture for CSS.
“SMACSS is a way to
examine your design
process and as a ...
5 Categorizations of CSS Rules
Base: Your single element selectors.
Layout: A section of your page (footer).
Module: A reu...
How Sass Fits in
Mixins & Organization Galore
output.css
output.scss
_base.scss _layout.scss _module.scss _state.scss _theme.scss
/_base/* /_layout/* /_module/* /_state...
output.css
output.scss
_base.scss _layout.scss _module.scss _state.scss _theme.scss
/_base/* /_layout/* /_module/* /_state...
sass:
+gt:
_colors.scss
_config.scss
_fonts.scss
font-awesome:
[font-awesome files here]
mixin:
_example.scss
+includes:
_pa...
sass:
+gt:
_colors.scss
_config.scss
_fonts.scss
font-awesome:
[font-awesome files here]
mixin:
_example.scss
+includes:
_pa...
OOCSS in Sass
OOCSS in Sass
OOCSS
Object-Oriented CSS
“… An approach for
writing CSS that’s fast,
maintainable, and
standards-based. It
...
2 Principles of OOCSS
Separate structure and skin.
Separate container and content.
Separate structure and skin.
Define repeating visual features as separate “skins” that you
can mix-and-match with your vari...
Separate container and content.
An object should look the same no matter where you put it.
Go Your Own Way
Duct Tape3
Must have plugins for Sassification.
Plugin
Mixin
Sass-Globbing: The Partial Whisperer
Adds the ability for Sass to have wildcard
partial importing from a directory.
Like C...
Breakpoint: Simple Media Queries
Demystifies and simplifies the process of
building media queries by allowing them
to be emb...
Breakpoint: Simple Media Queries
Demystifies and simplifies the process of
building media queries by allowing them
to be emb...
BEM Constructor: Speed up BEM!
Provides an easy avenue for defining,
extending, and standardizing BEM
formatting in a Sass ...
All of the Grids: Foundational Layouts!
Bootstrap, susy, Neat, singularity, and more!
All of the Grids: Foundational Layouts!
Bootstrap, susy, Neat, singularity, and more!
Compass: Too Big to Fail
Large plugin for Sass to provide typography,
CSS3, and Sass-helper utilities.
http://compass-styl...
Bourbon: A Nice Cold Glass of CSS3
Compares as a lite version of Compass.
Bourbon handles CSS3, a few golden utilities
lik...
There’s a lot more.
But wait…
Sache: Sass Plugin Repository
http://www.sache.in/
Search through all accessible
and published Sass plugins.
Sache: Sass Plugin Repository
http://www.sache.in/
Search through all accessible
and published Sass plugins.
Sassineering4
Mixins are what makes Sass truly spicy.
@mixin colourText { color: #aaa; }
@include colourText();
@mixin colourText() {

@include colourTextBrown();

}
@mixin colourText($colour) {

color: $colour;

}
@mixin colourText($colour: #aaa) {

color: $colour;

}
@mixin colourText($colour: #aaa) {

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

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

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

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

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

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

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

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

@include colourText();

}
Mixin Recursion3.3
Forecasting5
Where is Sass going in the future?
The next episode…4.0
1. Reject invalid function names.
2. Unitless/Unitful value comparison.
3. Allow auto ‘index’ file imp...
The next episode…4.0
1. Reject invalid function names.
2. Unitless/Unitful value comparison.
3. Allow auto ‘index’ file imp...
Docking6
How does Drupal support Sass? What about Drupal 8? 9? 10?
After an epic debate of Sass vs. LESS, it seems
that Sass has won out and will be adopted as
WordPress’ CSS preprocessor m...
After an epic debate of Sass vs. LESS, it seems
that Sass has won out and will be adopted as
WordPress’ CSS preprocessor m...
CSS Preprocessor libraries in core have not
been included.
8.x? 9.x? 10.x?
CSS Preprocessor libraries in core have not
been included.
8.x? 9.x? 10.x?
Most major theme frameworks in Drupal now
support CSS preprocessing via Sass.
SASS/SCSS Module
https://www.drupal.org/project/sass
1. Doesn’t support libSass.
2. Doesn’t use Library API.
3. Site shows...
Compass Module
https://www.drupal.org/project/compass
1. Forces user into Compass.
2. Doesn’t support libSass (?).
3. Does...
Benefit of Sass Server Side?
Best bet: wait on libSass.
www.linkedin.com/in/ericsembrat/en
LinkedIn
@esembrat
Twitter
www.ericsembrat.com
Blog
Slides available online! Reach out ...
www.linkedin.com/in/ericsembrat/en
LinkedIn
@esembrat
Twitter
www.ericsembrat.com
Blog
Slides available online! Reach out ...
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
Upcoming SlideShare
Loading in …5
×

Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics

510 views

Published on

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

Published in: Education
  • Be the first to comment

Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics

  1. 1. SasstronautsAdvanced Sass Usage, Plugins, Mixins, Tips, Tricks Atlanta Drupal User’s Group - April 2015 Eric Scott Sembrat - Georgia Institute of Technology
  2. 2. Our Mission Plan0 The prime directive in the short time we have here.
  3. 3. 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
  4. 4. Remember SyntaxATTN http://sassnotsass.com/
  5. 5. Play with Sass Today!ATTN http://sassmeister.com/
  6. 6. Atlanta Tech Chatstech404 http://tech404.io/
  7. 7. Introductions0 A little personal information, before all the sass.
  8. 8. Eric Sembrat Web Manager - College of Engineering - Georgia Tech Graduate Student - Learning Technologies - Georgia State Nerd Extraordinaire
  9. 9. Eric Sembrat Web Manager - College of Engineering - Georgia Tech Graduate Student - Learning Technologies - Georgia State Nerd Extraordinaire @esembrat Tweet at me, bro.
  10. 10. 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.
  11. 11. Mission Control1 The state of the Sass Mission in 2015.
  12. 12. 2015 Galactic Report Card
  13. 13. 2015 Galactic Report Card
  14. 14. 2015 Galactic Report Card (no pressure)
  15. 15. 2014 Release Strategy Sass 3.3 (March 2014) Sass 3.4 (August 2014) libsass
  16. 16. 2014 Release Strategy Sass 3.3 (March 2014) Sass 3.4 (August 2014) libsass
  17. 17. 2014 Release Strategy Sass 3.3 (March 2014) Sass 3.4 (August 2014) libsass
  18. 18. 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
  19. 19. $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; }
  20. 20. 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.
  21. 21. 2014 Release Strategy Sass 3.3 (March 2014) Sass 3.4 (August 2014) libsass
  22. 22. 2014 Release Strategy Sass 3.3 (March 2014) Sass 3.4 (August 2014) libsass
  23. 23. Release Details3.4 Programmatically selected! Selector Functions Power to the &. SassScript Update All the new colors. Color Updates Squashing those issues. Bug Fixes
  24. 24. 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() “
  25. 25. 2014 Release Strategy Sass 3.3 (March 2014) Sass 3.4 (August 2014) libsass
  26. 26. 2014 Release Strategy Sass 3.3 (March 2014) Sass 3.4 (August 2014) libsass
  27. 27. 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!
  28. 28. 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!
  29. 29. Speedy Compilation Web App Compatibility
  30. 30. Speedy Compilation Web App Compatibility Sticky syntax issues Libraries support TBD Edge functions WIP
  31. 31. Speedy Compilation Web App Compatibility Sticky syntax issues Libraries support TBD Edge functions WIP
  32. 32. 2014 Release Strategy Sass 3.3 (March 2014) Sass 3.4 (August 2014) libsass
  33. 33. 2014 Release Strategy Sass 3.3 (March 2014) Sass 3.4 (August 2014) libsass
  34. 34. 2014 Release Strategy Sass 3.3 (March 2014) Sass 3.4 (August 2014) libsass
  35. 35. 2014 Release Strategy Sass 3.3 (March 2014) Sass 3.4 (August 2014) libsass
  36. 36. 2014 Release Strategy Sass 3.3 (March 2014) Sass 3.4 (August 2014) libsass
  37. 37. 2014 Release Strategy Sass 3.3 (March 2014) Sass 3.4 (August 2014) libsass
  38. 38. Blueprints2 Designing your Sass / CSS infrastructure and architecture.
  39. 39. 3 CSS Organizational Architectures
  40. 40. 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
  41. 41. .block__element—modifier
  42. 42. .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
  43. 43. .block__element—modifier .person .person__hand .person__foot
  44. 44. .block__element—modifier .person .person__hand .person__foot
  45. 45. .block__element—modifier .person .person__hand .person__foot .person .person__hand—ring .person—foot—heels
  46. 46. .block__element—modifier .person .person__hand .person__foot .person .person—female__hand .person—female__foot .person { color: red; &__hand { color: black; &—ring {
 color: purple;
 } } }
  47. 47. .person—female .block__element—modifier .person .person__hand .person__foot .person { color: red; &__hand { color: black; &—ring {
 color: purple;
 } } }
  48. 48. .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;
 } } }
  49. 49. SMACSS in Sass
  50. 50. 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
  51. 51. 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.
  52. 52. How Sass Fits in Mixins & Organization Galore
  53. 53. output.css output.scss _base.scss _layout.scss _module.scss _state.scss _theme.scss /_base/* /_layout/* /_module/* /_state/* /_theme/*
  54. 54. output.css output.scss _base.scss _layout.scss _module.scss _state.scss _theme.scss /_base/* /_layout/* /_module/* /_state/* /_theme/*Customized for your own project!
  55. 55. 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
  56. 56. 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
  57. 57. OOCSS in Sass
  58. 58. 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.”
  59. 59. 2 Principles of OOCSS Separate structure and skin. Separate container and content.
  60. 60. 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!
  61. 61. Separate container and content. An object should look the same no matter where you put it.
  62. 62. Go Your Own Way
  63. 63. Duct Tape3 Must have plugins for Sassification.
  64. 64. Plugin Mixin
  65. 65. 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
  66. 66. 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; } }
  67. 67. 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; } }
  68. 68. 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.”
  69. 69. All of the Grids: Foundational Layouts! Bootstrap, susy, Neat, singularity, and more!
  70. 70. All of the Grids: Foundational Layouts! Bootstrap, susy, Neat, singularity, and more!
  71. 71. Compass: Too Big to Fail Large plugin for Sass to provide typography, CSS3, and Sass-helper utilities. http://compass-style.org/
  72. 72. 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/
  73. 73. There’s a lot more. But wait…
  74. 74. Sache: Sass Plugin Repository http://www.sache.in/ Search through all accessible and published Sass plugins.
  75. 75. Sache: Sass Plugin Repository http://www.sache.in/ Search through all accessible and published Sass plugins.
  76. 76. Sassineering4 Mixins are what makes Sass truly spicy.
  77. 77. @mixin colourText { color: #aaa; }
  78. 78. @include colourText();
  79. 79. @mixin colourText() {
 @include colourTextBrown();
 }
  80. 80. @mixin colourText($colour) {
 color: $colour;
 }
  81. 81. @mixin colourText($colour: #aaa) {
 color: $colour;
 }
  82. 82. @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); } }
  83. 83. @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); } }
  84. 84. @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); } }
  85. 85. @mixin colourText($colour: #aaa, $textShadow…) {
 color: $colour; @if lightness($colour) < 50% { @include text-shadow($textShadow); } @else {
 @include text-shadow($textShadow); } }
  86. 86. @mixin colourText($colour: #aaa, $textShadow…) {
 color: $colour; @if lightness($colour) < 50% { @include text-shadow($textShadow); } @else {
 @include text-shadow($textShadow); } }
  87. 87. @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.
  88. 88. @mixin colourText($colour: #aaa, $textShadow…) {
 color: $colour; @if lightness($colour) < 50% { @include text-shadow($textShadow); } @else {
 @include text-shadow($textShadow); } }
  89. 89. @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.
  90. 90. $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); } }
  91. 91. @include colourText() {
 @include colourText();
 } Mixin Recursion3.3
  92. 92. Forecasting5 Where is Sass going in the future?
  93. 93. 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
  94. 94. 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!
  95. 95. Docking6 How does Drupal support Sass? What about Drupal 8? 9? 10?
  96. 96. 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.
  97. 97. 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.
  98. 98. CSS Preprocessor libraries in core have not been included. 8.x? 9.x? 10.x?
  99. 99. CSS Preprocessor libraries in core have not been included. 8.x? 9.x? 10.x?
  100. 100. Most major theme frameworks in Drupal now support CSS preprocessing via Sass.
  101. 101. 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.
  102. 102. 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.
  103. 103. Benefit of Sass Server Side?
  104. 104. Best bet: wait on libSass.
  105. 105. 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!
  106. 106. 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!

×