Brian Hoke: WordPress & Sass @bentleyhoke
Sass & WordPress Brian Hoke
Bentley Hoke Interactive
@bentleyhoke | bentleyhoke.com

This Presentation http://bent.ly/ENLX

Aside: Presentation Theme WordPress theme to generate this kind of presentation
Implements reveal.js
Download

What Sass? preprocessor
language
extends CSS

Sass Code $base-color: #c00;
$body-font-color: lighten( $base-color, 15%);
$page-title-color: darken( $base-color, 20%);
$body-font-size: '13px';
article {
color: $body-font-color;
font: {
10
11
12
13
14
15
16
17
123456789
size: $body-font-size;
family: Helvetica, Arial, sans-serif;
}
h1 {
color: $page-title-color;
}
}

Compiled CSS Code article {
color: #ff1a1a;
font-size: "13px";
font-family: Helvetica, Arial, sans-serif;
12345678
} article h1 {
color: #660000;
}

Really, what is it? Script that interprets SCSS into CSS
Sass is both the language and the script process
Flavors –
example
old (indented)
new (SCSS)
Output is perfectly valid CSS

Various Whoops As in “Big Whoops”:
Compression
Variables
Nesting
File organization (partials & import)
Code reuse (mixins & inheritance)
Built-in functions & operators

Install Sass Apps
Command line
http://sass-lang.com/install

Command Line Installation [Windows] Install Ruby
Windows:
gem install sass
[Mac] sudo gem install sass
test it: sass -v
Ruby Installer

How Sass? setup watch to generate CSS from changes to SCSS
carelessly bang out some code thoughtfully plan out organization of code and files
upload generated CSS – just like it was written directly – to production site

Setting Your Watch sass --watch themes/reveal/sass:themes/reveal --style compressed

Variables & Functions $bright-red: #f00;
$medium-red: #c00;
$half-opaque-white: rgba(255,255,255,0.7);
$default-link-color: opacify($medium-red, 0.6);
$page-title-color: darken($medium-red, 10%);
$link-color: complement($medium-red);
$rightleft-padding: 2.5%;
10
$tall-topbottom-padding: 1%;
11
$narrow-topbottom-padding: 0.5%;
12
13
$site-width: 90%;
14
$main-content-width: 68%;
15
16
$sidebar-width: 99% - $main-content-width - (4 * $rightleft-padding);
123456789

Code Organization @import 'reset';
@import 'assistive';
@import 'variables';
@import 'bxslider';
@import 'mainnav';
@import 'interior';
@import 'full_flight_info';
@import 'sidebar';
@import 'structure';
10
@import 'slicknav';
11
@import 'responsive';
123456789

Mixins Sass (from Bourbon library)
1234
@import 'bourbon/bourbon';
section {
@include linear-gradient(to top, red, orange);
} Resulting CSS
12345
section {
background-color: red;
background-image: -webkit-linear-gradient(bottom, red, orange);
background-image: linear-gradient(to top, red, orange);
}

Why Sass? Code organization: easier to maintain, team
Performance: loads faster
Tools: write better, faster, stronger code
Sharing: get code from, give code to others

Code Organization easier to team
easier to maintain
easier to give and receive
example: ABQ airport sites

Performance
stitch together multiple CSS files – avoid limit on number of concurrent connections
compression

Power inheritance and mixins offer DRY ease-of-change: great power and great responsibility
built-in functions
a for loop!

Sharing handing off, receiving code
switchboarding of settings
example: Foundation

More Info & Questions http://sass-lang.com/