@mlteal | #WCPhilly | June 2015

Getting Started with SASSor: All the things I wished for with CSS

@mlteal | #WCPhilly | June 2015

Maura Teal Web Developer at FanSided @mlteal | mlteal.com

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

@mlteal | #WCPhilly | June 2015

What do you get?

More organization, sanity because variables, mixins, and functions.

TL;DR: Build and adjust stylesheets efficiently.

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

@mlteal | #WCPhilly | June 2015

Getting Started1. 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

@mlteal | #WCPhilly | June 2015

Just want to try it out?

Codepen: http://codepen.io/

Sassmeister: http://sassmeister.com/

@mlteal | #WCPhilly | June 2015

Features

• Nesting

• Variables

• Mixins

• Functions

• Minification

• Libraries

To name a few…

@mlteal | #WCPhilly | June 2015

Nesting

Xzibit knows you like selectors

@mlteal | #WCPhilly | June 2015

NestingSASS

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

@mlteal | #WCPhilly | June 2015

Nestinga { color: teal; &.special { color: gold; } &:hover, &:active { font-style: italic; }}

a { color: teal;}a.special { color: gold; }a:hover, a:active { font-style: italic; }

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

@mlteal | #WCPhilly | June 2015

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

@mlteal | #WCPhilly | June 2015

Mixins

add candy to your code

@mlteal | #WCPhilly | June 2015

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

@mlteal | #WCPhilly | June 2015

FunctionsCreate 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

@mlteal | #WCPhilly | June 2015

Putting it all togetherCombining 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 ); }

}

@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

@mlteal | #WCPhilly | June 2015

Test Drive in a ProjectPlugins:

Jetpack Custom CSS module: for adding custom CSS directly on site

Admin Color Schemes: https://wordpress.org/plugins/admin-color-schemes/

@mlteal | #WCPhilly | June 2015

Test Drive in a ProjectStarter 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/

@mlteal | #WCPhilly | June 2015

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

@mlteal | #WCPhilly | June 2015

Future & PerformanceRuby 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)!

@mlteal | #WCPhilly | June 2015

ResourcesSass Documentation:

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

Codepen: http://codepen.ioSassmeister: http://sassmeister.com

Underscores: http://underscores.meBones: http://themble.com/bones/

Ruby Sass vs LibSass: http://sassbreak.com/ruby-sass-libsass-differences/ Sass Compatibility Guide: http://sass-compatibility.github.io/