Pre-processingINCEPTION ALL OVER AGAIN!

RIPARJAN EISING

He’s not really dead :)

Hi, I’m Kristof@houbenkristof — kristof@treeshadow.be

Front-end/designat Mobile Vikings

I’m always up for a

Challenge

Run a small firmCALLED TREESHADOW MEDIA

Creative BrewskiTOGETHER WITH @TOMCLAUS & @DENNISJANSSEN

LEt’s TALK

CSS

"You don’t need a new stylesheet syntax, CSS is simple and you’re

a moron if you can’t do it."

C’est très simple

Not that easy to maintain

Stylesheets evolve

Simplicity creates complexity

Keep things DRYDON’T REPEAT YOURSELF

we should Reference to

existing information

"CSS is the weakest link in the web developers toolbox. The problem goes deeper than CSS’s

lack of variables. Unlike the “function” in programming, CSS has no fundamental

building block."

It’s all aboutAbstractions

CSS PRIMITIVES HAVE NO MEANING

That’s our job!

AbstractionsARE GROUPS OF PRIMITIVES

Abstractions are not abstract to us

We give BUILDING BLOCKs meaning

SO IT MAKES IT EASIER FOR US TO UNDERSTAND

Our DESIGNSCHANGE

A kitten dies every time that happens

Find & replaceOH PLEASE, DON’T GET ME STARTED!

Client: “We want #000 to be #333 but not the user information underneath my

#bada55 body text, oh while you're at it could you position absolute that element and

rotate it a gazillion degrees, …

oh, #333 doesn't look that great after all…

Change it back!”

You’re screwed

What do we

NEED?

The interior decorator!

Decorates with parts

He does not make those parts

LAMPS, TABLES, CHAIRS…

PArts for

PArts

Oh my god YOU REUSED A BUTTON!

When elements are common

REUSE tHEM!

Focus!ON WHAT IS IMPORTANT, YOU MUST!

Hard to upgrade Customized third

party stylesheets

Clearly we are in need of some

Pre-processing

"In computer science, a preprocessor is a program that processes its input data to

produce output that is used as input to another program.”

— Wikipedia

SyntacticCUSTOMIZED SYNTAX, EXTEND THE LANGUAGE, ADD

IMPROVEMENTS

ex. SASS & LESS

Keeping things maintainable

SASSBY HAMPTON CATLIN & NATHAN WEIZENBAUM

Written in Ruby

Don’t worry, there are also GUI’s

Watches folders & compiles on save

2007ORIGINAL SASS SYNTAX

Hard to convert existing CSS TO SASS

2010SASS 3 INTRODUCES SCSS

Regular CSS =

VALID SCSS

BUT WAIT there’s also

COMPASS

It’s chock full of the web’s best

reusable patterns.

Also contains other cool featuresIMAGE SPRITING, COLOR FUNCTIONS

You sayLESS

It’s all javascriptORIGINALLY WRITTEN IN RUBY BY ALEXIS SELLIER

Regular CSS =

VALID LESS

LESS INSPIRED SCSS

VSLESS

SASSThanks to Chris Eppstein - https://gist.github.com/674726

Learning curveYOU HAVE TO KNOW JACK SH*T ABOUT THE CLI

CODEKIT IS HOT!

CSS3 HelpersSASS HAS COMPASS, LESS DOES NOT

Variables

Mixins

Extending

Custom units in SASS

MAKING THE LANGUAGE MORE FUTUREPROOF

Looping

DEMO

Thank you!

Resources:http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/http://sonspring.com/journal/sass-for-designershttp://css-tricks.com/sass-vs-less/http://chriseppstein.github.com/blog/2009/09/20/why-stylesheet-abstraction-matters/

Questions?