Warning: preg_replace(): Compilation failed: invalid range in character class at offset 4 in /home/lylahnic/public_html/dev.wpwhatnot.com/wp-content/plugins/crayon-syntax-highlighter/crayon_langs.class.php on line 340
What is a CSS Pre-processor

Developer's Roundtable Notes

Session: Super Powers for CSS

What is a CSS Pre-processor

Mostly, a tool to make your life easier!

Technically, a language that extends the CSS.

 

Why use one?

In a word: Variables

And: Nesting, Importing, Operations

Bonuses: Formatting and Minification

Battle of the Pre-processors

less1

http://lesscss.org

sass1

http://sass-lang.com

 

┬áMost of what I’ll cover today is the same for both

What Can You Do With LESS?

  • Set Variables
  • Do Computations
  • Nest Parameters
  • Import Styles and Fonts
  • Create Mixins (classes)
  • Create Parametric Mixins (classes with variables)
  • Lots More Advanced things

Plus, everything else you can do with CSS

Defining Variables


Fatal error: Uncaught Error: Call to a member function id() on array in /home/lylahnic/public_html/dev.wpwhatnot.com/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php:36 Stack trace: #0 /home/lylahnic/public_html/dev.wpwhatnot.com/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php(538): CrayonFormatter::format_code('', Array, Object(CrayonHighlighter)) #1 [internal function]: CrayonFormatter::delim_to_internal(Array) #2 /home/lylahnic/public_html/dev.wpwhatnot.com/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php(516): preg_replace_callback('#()#msi', 'CrayonFormatter...', '@gold: #F8AA46;...') #3 /home/lylahnic/public_html/dev.wpwhatnot.com/wp-content/plugins/crayon-syntax-highlighter/crayon_highlighter.class.php(166): CrayonFormatter::format_mixed_code('@gold: #F8AA46;...', Object(CrayonLang), Object(CrayonHighlighter)) #4 /home/lylahnic/public_html/dev.wpwhatnot.com/wp-content/plugins/crayon-syntax-highlighter/crayon_highlighter.class.php(186): CrayonHigh in /home/lylahnic/public_html/dev.wpwhatnot.com/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 36