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

SasstronautsAdvanced Sass Usage, Plugins, Mixins, Tips, Tricks

Atlanta Drupal User’s Group - April 2015Eric Scott Sembrat - Georgia Institute of Technology

Our Mission Plan0The 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. Forecast: The Future of Sass

6. Docking: Drupal Support

2. Blueprints: Architecting Sass Projects

Remember SyntaxATTN

http://sassnotsass.com/

Play with Sass Today!ATTN

http://sassmeister.com/

Atlanta Tech Chatstech404

http://tech404.io/

Introductions0A little personal information, before all the sass.

Eric SembratWeb Manager - College of Engineering - Georgia Tech

Graduate Student - Learning Technologies - Georgia State

Nerd Extraordinaire

Eric SembratWeb Manager - College of Engineering - Georgia Tech

Graduate Student - Learning Technologies - Georgia State

Nerd Extraordinaire

@esembratTweet at me, bro.

Eric SembratWeb Manager - College of Engineering - Georgia Tech

Graduate Student - Learning Technologies - Georgia State

Nerd Extraordinaire

http://www.ericembrat.comLearn more!

@esembratTweet at me, bro.

Mission Control1The 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 Class Support

Squashing those issues.Bug Fixes

$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; }

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.

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.Color Updates

Squashing those issues.Bug Fixes

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()

“

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 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!

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!

Speedy CompilationWeb App Compatibility

Speedy CompilationWeb App Compatibility

Sticky syntax issuesLibraries support TBDEdge functions WIP

Speedy CompilationWeb App Compatibility

Sticky syntax issuesLibraries support TBDEdge 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

Blueprints2Designing your Sass / CSS infrastructure and architecture.

3 CSS Organizational Architectures

3 CSS Organizational Architectures

SMACSSStands 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.”

OOCSSObject-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

.block__element—modifier

.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

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

color: red;

&__hand { color: black;

&—ring {color: purple;}

} }

.person—female

.block__element—modifier

.person

.person__hand .person__foot.person {

color: red;

&__hand { color: black;

&—ring {color: purple;}

} }

.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;}

} }

SMACSS in Sass

SMACSSStands 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

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.

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/* /_theme/*

output.css

output.scss

_base.scss _layout.scss _module.scss _state.scss _theme.scss

/_base/* /_layout/* /_module/* /_state/* /_theme/*Customized for your own project!

\

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

\

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

OOCSS in Sass

OOCSS in Sass

OOCSSObject-Oriented CSS

“… An approach for writing CSS that’s fast,

maintainable, and standards-based. It adds much needed

predictability to CSS.”

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 various objects to achieve a large amount of visual variety without much code.

@mixin and @include to the rescue!

Separate container and content.

An object should look the same no matter where you put it.

Go Your Own Way

Duct Tape3Must 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 CSS, importing follows an alphanumerical ordering.

https://github.com/chriseppstein/sass-globbing

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; } }

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; } }

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

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-style.org/

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/

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.

Sassineering4Mixins 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); } @else { @include text-shadow(0, 1, 0, #000); } }

@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); } }

@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); } }

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

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

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

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

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

$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); } }

@include colourText() { @include colourText();}

Mixin Recursion3.3

Forecasting5Where 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 import from

folder. 4. One-time import library files.

https://github.com/sass/sass/milestones/4.0

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!

Docking6How 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 moving forward.

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.

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 no CSS if compile

fails. 4. Yelled SASS instead of

spelled Sass.

1. CSS Aggregation functionality. 2. Compiles Sass server-side.

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.

Benefit of Sass Server Side?

Best bet: wait on libSass.

www.linkedin.com/in/ericsembrat/en

LinkedIn

@esembratTwitter

www.ericsembrat.com

Blog

Slides available online! Reach out to me with any questions.

Thanks for Attending!

www.linkedin.com/in/ericsembrat/en

LinkedIn

@esembratTwitter

www.ericsembrat.com

Blog

Slides available online! Reach out to me with any questions.

Thanks for Attending!