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

Style Themes Faster, Better:

Intro to Sass and Less CSS

Paul Clark
WordCamp Los Angeles 2013

@pdclark on twitter, wordpress.org, github

About Brainstorm Media

Co-founder & Technical Director at Brainstorm Media

About Paul & WordPress

About Paul & CSS Preprocessors

About Paul & CSS Preprocessors

About Paul & CSS Preprocessors

To process, or not to process

What is a CSS preprocessor?

Why use a CSS preprocessor?

Why NOT to use a CSS preprocessor?

Which flavor?

Less, SASS, & Compass — Oh My!

LESS:

lesscss.org

Pros

  • Intentionally simple
  • Client-side option

Cons

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

SASS:

sass-lang.com

Pros

  • Option of SASS (indents)
    or SCSS ("normal")
  • 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

What can they do for you?

Our subject: TwentyEleven

Nesting

Putting things inside of things

(like HTML!)

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

Replacing things with other things

(colors! fonts!)

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

Mixins

Code snippets... That you mix... in.

(prefixes! fonts!)

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

Secret messages to your future self

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!

/*! Comments with an "!" at the start stay in even compressed mode. */


		
/* style.css */

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




a { color: #000; }

/*! Comments with an "!" at the start stay in even compressed mode. */
		

Math

Automatic calculations & ratios

Math

Functions

Tiny programs, like Photoshop

(Don't get too fancy!)

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

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

Resources

Tools

Playgrounds
SassCast

Demo

Thank you! (Questions?)