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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$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: {
    size: $body-font-size;
    family: Helvetica, Arial, sans-serif;
  }
 
  h1 {
    color: $page-title-color;
  }
}

Compiled CSS Code

1
2
3
4
5
6
7
8
article {
  color: #ff1a1a;
  font-size: "13px";
  font-family: Helvetica, Arial, sans-serif;
}
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

Command Line Installation

  • [Windows] Install Ruby
  • gem install sass
  • [Mac] sudo gem install sass
  • test it: sass -v

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$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%;
$tall-topbottom-padding: 1%;
$narrow-topbottom-padding: 0.5%;
 
$site-width: 90%;
$main-content-width: 68%;
 
$sidebar-width: 99% - $main-content-width - (4 * $rightleft-padding);

Code Organization

1
2
3
4
5
6
7
8
9
10
11
@import 'reset';
@import 'assistive';
@import 'variables';
@import 'bxslider';
@import 'mainnav';
@import 'interior';
@import 'full_flight_info';
@import 'sidebar';
@import 'structure';
@import 'slicknav';
@import 'responsive';

Mixins

Sass (from Bourbon library)

1
2
3
4
@import 'bourbon/bourbon';
section {
  @include linear-gradient(to top, red, orange);
}

Resulting CSS

1
2
3
4
5
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/