Atlanta Drupal User's Group - April 2015 - Sasstronauts: Advanced Sass Topics
-
Upload
eric-sembrat -
Category
Education
-
view
103 -
download
0
Transcript of 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
@esembratTwitter
www.ericsembrat.com
Blog
Slides available online! Reach out to me with any questions.
Thanks for Attending!
www.linkedin.com/in/ericsembrat/en
@esembratTwitter
www.ericsembrat.com
Blog
Slides available online! Reach out to me with any questions.
Thanks for Attending!