CSS preprocessors with Verekia

Yelp front-end engineer Verekia will demonstrate the power of CSS preprocessors and explain why he believes these are a game changer for front-end development in this presentation given at the San Francisco HTML5 User Group.

Verekia's talk will cover:
- CSS weaknesses
- Preprocessor features
- Common misconceptions
- Sass, Less, or Stylus?
- Workflow and techniques
- Preprocessors + OOCS

0:00 Introduction
1:21 VEREKIA
2:14 QUESTIONS
3:50 AT THE OFFICE...
5:10 3 MAJOR CSS WEAKNESSES
7:39 THE 3 MOST POPULAR PREPROCESSORS
9:57 VARIABLES TYPES
10:19 OPERATIONS AND COLOR FUNCTIONS
11:43 MIXINS
15:29 IMPORTS AND MINIFICATION
17:14 LESS RUNS CLIENT-SIDE
18:22 IT'S HARD TO INSTALL
21:15 HOW TO CHOOSE?
23:51 RELATED PROJECTS
26:18 SASS WELCONE PACKAGE!
27:50 COMPASS
30:16 INSTALLING AND RUNNING
31:51 AVOIDING THE COMMAND LINE
32:19 GUI COMPILERS
32:54 SYNTAX HIGHLIGHTING
33:24 PROJECT STRUCTURE EXAMPLE
34:50 DEBUGGING
36:35 HANDY CONVERSIONS
37:39 NESTING AND MEDIA QUERIES
39:03 MOBILE-FIRST RESPONSIVE DESIGN
41:16 USING NESTING WITH MODERNIZR AND IE
42:21 GENERATING A COLOR PALETTE
49:34 DEVELOPER EFFICIENCY CHART

[bothandeach]

He is very clear because of the accent difference. He makes it super clear.

[SamBessalah]

Nice talk Jonathan. I remember meeting him at a meetup in Paris last year. Almost passionate.

[airandfingers]

Great talk, thank you!
Only one thing: criteria is actually the plural of criterion, and in the context at 21:12 I think "criteria" makes more sense ;)

[surreal]

Awesome talk, super informative. Thanks for posting it!

[NikkexD]

I am SO getting started with Less now. SimpLess for Windows seem to do a pretty good job as well! I'm satisfied :) Great talk as well!

[Tarulia]

Just a note about codekit, what he was talking about :)

There's a Windows alternative for windows developers, which is prepros (alphapixel. com/prepros). It's also available for Mac by now I think so you might find that useful (open source and on GitHub by the way)

[romanvolkov]

Jonathan, amazing presentation! Thanks a lot!

By the way, did you get a chance to finish a FireSass alternative for Chrome?

[thanesh]

I learned quite a bit just by watching this video, thanks

[JeromeHencky]

Bravo Jonathan, super présentation. Content de constater que tu t'éclates à SF.

[Ekbyte]

less of LESS and more of SASS ! 
was expecting a slide comparing all 3 or atleast the main 2 pre-processors !

[juwedevelop]

Thnx for this nice interesting Video. One question, is CSS preprocessing also fit for smaller projects or only big Projects. Does it depend on the size of a project?  Make it sense to smaller company Websites too to change the development workflow?

[TheLionsShow]

I do too, personally I think syntax is a very valid criterion :)

[NicolasEmbleton]

I still prefer Stylus :). But that was a great session. Very interesting.

[UnnDunn]

Been using LESS for a couple months now. No way am I going back to vanilla CSS.

[renegaed]

I have always preferred SASS it's much more feature rich.

[RashidOmar]

OMG I think I saw Paul Irish next to me on the Bus

[psinno]

someone should add a pre processor to c

[MrsMilkyWai]

Good job, tu changes vraiment pas :p

[brentknudsen]

I'm sure this is a good presentation, but the accent made a lot of it hard to understand. (I'm a Native-English speaker, btw).

[bothandeach]

I bet I am a more native English speaker than you