A talk about Sass for WordCamp Philadelphia 2015

1. @mlteal | #WCPhilly | June 2015
Getting Started with SASS
or: All the things I wished for with CSS

2. @mlteal | #WCPhilly | June 2015
Maura Teal
Web Developer at FanSided
@mlteal | mlteal.com

3. @mlteal | #WCPhilly | June 2015
What is it?
Syntactically Awesome StyleSheets
A CSS pre-processor that allows us to use logic similar to
real programming languages.

4. @mlteal | #WCPhilly | June 2015
What do you get?
More organization, sanity because variables,
mixins, and functions.
TL;DR: Build and adjust stylesheets efficiently.

5. @mlteal | #WCPhilly | June 2015
How Does it Work?
Watch your code while you
work locally and continually
compile into the CSS file
you’ll use in your project.

6. @mlteal | #WCPhilly | June 2015
Getting Started
1. Install Ruby
2. Install Sass Gem
3. Watch those files:
Alternatively, download a GUI
that takes care of things:
Codekit ($)
Koala (free)
Scout (free)
From the Command Line:
cd path/to/my/sass/folder
sass --watch input.scss:output.css
Ctrl+C to stop watching

7. @mlteal | #WCPhilly | June 2015
Just want to try it out?
Codepen: http://codepen.io/
Sassmeister: http://sassmeister.com/

8. @mlteal | #WCPhilly | June 2015
Features
• Nesting
• Variables
• Mixins
• Functions
• Minification
• Libraries
To name a few…

9. @mlteal | #WCPhilly | June 2015
Nesting
Xzibit knows you like selectors

10. @mlteal | #WCPhilly | June 2015
Nesting
SASS
.parent {
blockquote, p {
font-family: Times;
}
a {
color: teal;
}
span {
background: yellow;
}
}
CSS
.parent blockquote,
.parent p {
font-family: Times;
}
.parent a {
color: teal;
}
.parent span {
background: yellow;
}

11. @mlteal | #WCPhilly | June 2015
Nesting
a {
color: teal;
&.special {
color: gold;
}
&:hover,
&:active {
font-style: italic;
}
}
a {
color: teal;
}
a.special {
color: gold;
}
a:hover,
a:active {
font-style: italic;
}

12. @mlteal | #WCPhilly | June 2015
Variables
$variable-name : /* variable properties here */;
Think colors (hex values or rgba), fonts, sizes,
or even previously defined vars:
$fuchsia : #f0f;
$border-style : 1px solid $fuchsia;
$heading-size : 30px;
$subheading-size : $heading-size / 2;

13. @mlteal | #WCPhilly | June 2015
Variables
1. Define your color
palette just this one time
$white : #FFFFFF;
$teal : #27ba9a;
$french-blue : #3196da;
$purple : #9a58b5;
$light-grey : #7e8c8d;
2. Abstract it in case all
headings change from
$purple to $teal someday
$heading : $purple;
$sub-heading : $white;
$body-text : $light-grey;
$link : $french-blue;
$accent : $teal;

14. @mlteal | #WCPhilly | June 2015
Mixins
add candy to your code

15. @mlteal | #WCPhilly | June 2015
Mixins
Create reusable chunks of CSS
@mixin border-radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
.container {
@include border-radius(18px);
} .footer {
@include border-radius(6px);
}
.container {
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
border-radius: 18px;
}
.footer {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}

16. @mlteal | #WCPhilly | June 2015
Functions
Create reusable logic
@function remy($pxsize) {
@return: ($pxsize / 16 )+rem;
}
.container {
font-size: remy(32);
}
.container {
font-size: 2rem;
}
Ref: http://sass-lang.com/documentation/Sass/Script/Functions.html

17. @mlteal | #WCPhilly | June 2015
Putting it all together
Combining map-get() function with array maps
$iconfont-map : (
arrow: "f063",
caret-down: “f0d7",
wordpress: “f19a",
);
@mixin icon( $icon ) {
font-family: “Icon Font”;
content: '#{map-get( $iconfont-map, $icon )}';
}
.my-list a {
&:before {
@include icon( arrow );
}
}

18. @mlteal | #WCPhilly | June 2015
Sass Frameworks
Utilize libraries & extensions
with Sass to get an even
more powerful preprocessor.
Many make built-in functions
available like transform() or
include their own grid systems.
• Compass
• Breakpoint
• Susy
• Bourbon
• Bootstrap

19. @mlteal | #WCPhilly | June 2015
Test Drive in a Project
Plugins:
Jetpack Custom CSS module: for adding custom CSS
directly on site
Admin Color Schemes: https://wordpress.org/plugins/
admin-color-schemes/

20. @mlteal | #WCPhilly | June 2015
Test Drive in a Project
Starter Themes:
Underscores: http://underscores.me/
Bones (need Compass): http://themble.com/bones/
Foundation: http://foundationpress.olefredrik.com/
Roots (now Sage): https://roots.io/sage/
Some Like it Neat: http://somelikeitneat.com/

21. @mlteal | #WCPhilly | June 2015
Workflows
Utilize task-based build tools (either
Grunt or Gulp) to watch and compile all
the things.
Config files make life easier, and
actively watch more than just your
stylesheets (think minifying JS and
more)

22. @mlteal | #WCPhilly | June 2015
Future & Performance
Ruby Sass - The original Sass we know & love
- Simple installation
- Lots of compatible frameworks
- Compiling can get slow on larger projects
LibSass - A C/C++ port of Sass
- Just a Sass library, so it needs a wrapper
- Not 100% caught up to Ruby Sass (but so close!)
- Stricter on syntax
- Much faster (up to 4000x)!

23. @mlteal | #WCPhilly | June 2015
Resources
Sass Documentation:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html
Codepen: http://codepen.io
Sassmeister: http://sassmeister.com
Underscores: http://underscores.me
Bones: http://themble.com/bones/
Ruby Sass vs LibSass: http://sassbreak.com/ruby-sass-libsass-differences/
Sass Compatibility Guide: http://sass-compatibility.github.io/