twitter: @pdclark brainstormmedia.com/wcsea2013
WordCamp Seattle 2013

Style Themes Faster, Better:

Intro to Sass and Less CSS

Paul Clark
WordCamp Seattle 2013

@pdclark on twitter, wordpress.org, github

About Paul's Company

Technical Director at Brainstorm Media

About Paul & WordPress

About Paul & CSS Preprocessors

About Paul & CSS Preprocessors

To process, or not to process

Why use a CSS preprocessor?

Why NOT to use a CSS preprocessor?

What can they do for you?

Our subject: TwentyEleven

Nested Selectors sass-lang.com/tutorial.html#nesting

Nested Selectors sass-lang.com/tutorial.html#nesting

Nested Properties sass-lang.com/tutorial.html#nesting

Variables sass-lang.com/tutorial.html#variables

Functions sass-lang.com/docs/yardoc/Sass/Script/Functions.html

Alot of Functions sass-lang.com/docs/yardoc/Sass/Script/Functions.html

Math

Mixins sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins

/* style.scss */
@mixin rounded-top-left( $radius: 10px ) {
  border-top-left-radius: $radius;
  -moz-border-radius-top-left: $radius;
  -webkit-border-top-left-radius: $radius;
}

#navbar li { @include rounded-top-left; }
#footer { @include rounded-top-left( 20px ); }
		
/* style.css */
#navbar li {
  border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -webkit-border-top-left-radius: 10px; }

#footer {
  border-top-left-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -webkit-border-top-left-radius: 20px; }
		

Comments sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#comments

/* style.scss */

/*
Theme Name: Twenty Eleven
Author: the WordPress team
Author URI: http://wordpress.org
*/

// Normal comments stay in CSS
// Single-line comments are removed

a { color: #000; } // Shh! Secret!


		
/* style.css */

/*
Theme Name: Twenty Eleven
Author: the WordPress team
Author URI: http://wordpress.org
*/

a { color: #000; }
		

Which flavor?

LESS:

lesscss.org

Pros

  • Intentionally simple
  • Client-side option

Cons

  • Limited (no Compass)
  • Client-side option?!

SASS:

sass-lang.com

Pros

  • Option of SASS or SCSS
  • Can work up to Compass

Cons

  • Docs not as pretty :'(

Compass (Framework on SASS):

compass-style.org

Pros

  • Crazy-awesome Helpers
  • Plugins on RubyGems

Cons

  • More to learn

WordPress JetPack: Less or SCSS

Pros

Cons

  • In-browser editing is slower than local editing

Resources

Tools

Playgrounds
SassCast

Demo

Thank you! (Questions?)