• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Deep Dive Into CSS Preprocessors
 

Deep Dive Into CSS Preprocessors

on

  • 73,813 views

During this talk, Jonathan Verrecchia (@verekia) demonstrates the power of CSS preprocessors and explain why he believes these are a game changer for front-end development. ...

During this talk, Jonathan Verrecchia (@verekia) demonstrates the power of CSS preprocessors and explain why he believes these are a game changer for front-end development.

CSS preprocessors are used to enhance CSS with amazing new features (variables, functions, file concatenation and minification, color operations, etc.) and can dramatically improve your development workflow. Jonathan sheds light on some very common misconceptions about them and will help you choose between Sass Less and Stylus for your next project.

The talk will cover the basics of CSS preprocessors but also more advanced techniques with concrete use cases. If you haven’t dived into CSS preprocessors yet, if you’re still skeptical, or if you want one more proof that they’re the way to go now, this talk is for you!

Statistics

Views

Total Views
73,813
Views on SlideShare
13,975
Embed Views
59,838

Actions

Likes
68
Downloads
357
Comments
3

45 Embeds 59,838

http://verekia.com 56138
http://marakana.com 1744
http://mobicon.tistory.com 1148
https://thenewcircle.com 185
http://127.0.0.1 136
http://www.okilla.com 121
http://candidosg.com 55
http://nodejs.in 47
https://twitter.com 41
http://translate.googleusercontent.com 39
http://candidosalesg.wordpress.com 30
http://abtasty.com 19
http://10.0.80.119 18
http://localhost 18
https://www.facebook.com 17
http://www.facebook.com 9
http://flavors.me 9
http://ali.staging.elcomcms.com 8
http://10.0.80.163 7
http://digg.com 6
http://zmmbreeze.github.com 6
http://webcache.googleusercontent.com 5
http://us-w1.rockmelt.com 3
http://jp.flavors.me 3
http://www.newsblur.com 2
http://cloud.feedly.com 2
http://www.365dailyjournal.com 2
http://www.inoreader.com 2
http://prlog.ru 2
http://ranksit.com 1
http://131.253.14.98 1
http://inoreader.com 1
http://feedly.com 1
http://feedreader.com 1
http://www.youshier.com 1
http://www.techgig.com 1
https://twimg0-a.akamaihd.net 1
http://www.m.techgig.com 1
http://es.flavors.me 1
http://www.verious.com 1
http://mrkn.co 1
http://cucn502.org 1
http://fr.flavors.me 1
http://t.co 1
http://verekia.com.netzcheck.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

13 of 3 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Deep Dive Into CSS Preprocessors Deep Dive Into CSS Preprocessors Presentation Transcript

    • Deep dive intoCSS Preprocessors @SFHTML5 – May 31st 2012
    • Jonathan VerrecchiaFront-End Engineer atAuthor of a French book about HTML5Created H5BPs builderIm @verekia and I blog on verekia.com
    • Questions• Feel free to interrupt me at anytime• Or tweet your questions using #csspp ?
    • I will talk about• CSS weaknesses• Preprocessors features• Common misconceptions• Sass, Less or Stylus?• Workflow and techniques• Preprocessors + OOCSS
    • CSS weaknesses
    • At the office...Product Manager:“Can we try changing our theme quickly? I thinkblue buttons would be more engaging!”You:“Hm... Its not that quick. Come back in 30 min?”Product Manager 30 min later:“Ah its ugly! Can we try a lighter blue andcompare it to this orange and green too?”
    • CSS variables?You wont be able to use them untilIE 7, 8, 9 , 10, 11, [...] usage drops below 1%. “Variables... finally!”
    • 3 major CSS weaknesses• Lack of essential basic features• Hard to maintain (huge messy CSS files)• Not DRY enough - leads to mistakes
    • Working with multiple filesHaving multiple CSS files is essential formaintainability and collaborationBut @import sucks (additional HTTP requests)We need to use a build tool for concatenation.... but maybe it can do more than just that?This is what CSS preprocessors do :)
    • The 3 most popular preprocessors They are all great :)
    • Features
    • About those features...Less, Sass and Stylus support them allThey dont enhance CSS, but improve yourdevelopment workflow
    • VariablesThey are actually constants (and its fine)$my_blue: #4e6cb0; // Sass@my_blue: #4e6cb0; // Less my_blue = #4e6cb0; // Stylus$primary_color: $my_blue;h1 { color: $primary_color;}
    • Variables TypesVariables are not just for colors!$fonts: Helvetica, Arial, sans-serif;$images_path: "../img/"$font-size: 1.5em;$margin: 20px;$width: 80%;
    • Operations and color functionsMath and colors operationswidth: 25px * 4 + 100px / 2 – 50px; // = 100pxcolor: #990033 + #666666; // = #FF66CCColor functions$light_blue: lighten($my_blue, 20%);$flashy_blue: saturate($my_blue, 50%);
    • MixinsFunctions like lighten() return a value.Mixins dont return anything but output CSS.@mixin border-radius($radius: 10px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius;}.button { @include border-radius(4px);}
    • Nesting.pop { .link { .pop-btn { &:hover { } }} }// ======== OUTPUT ======== // ======== OUTPUT ========.pop {} .link {}.pop .pop-btn {} .link:hover {} Dont nest too much (4 levels max)
    • Imports and minificationImports now work with no performance costs!@import "colors";@import "typography";@import "layout";CSS output can be clear or minified#main{color:#fff;background-color:#000}#mainp{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
    • Misconceptions
    • “I need a Ruby or Node backend”• Sass is written in Ruby• Less and Stylus are written in JavaScriptThis does NOT mean you need Ruby or Nodeon your production server to use them.You need them on yourdevelopment machine.
    • “Less runs client-side”Less can run client-side.OK for quick testing or to compile in-browserif you cant access your dev environment.Never - EVER - use it in production, its evenworse than CSS @import for performance.Always use Node (or Rhino).
    • “Its hard to install”Both Ruby and Node are easy to install on anyplatform: Ruby is pre-installed, Node.pkg RubyInstaller.exe, Node.exe apt-get install ruby / nodejs
    • “Bootstrap uses Less, so its better”According to @fat, they chose Less because:• It was compiling faster than Sass (probably not true anymore since Sass has caching)• They are friends with Alexis Sellier (Less) so they can easily request a fix or a featureSo nothing you should worry about.
    • Even big guys can make mistakes
    • Sass, Less or Stylus?
    • How to choose?Bad criterion • The syntax (almost the same) • Twitter Bootstrap (exists in Sass)Good criterion • Available features (Sass and Stylus) • Community (Sass and Less) • Ruby vs. JS if you want to get involved
    • Related projectsSass: Hampton Catlin - @hcatlin (Inventor)Nathan Weizenbaum - @nex3 (Lead developer)Stylus: TJ Holowaychuk - @tjholowaychuk
    • Lead and (almost) unique developer of Less
    • Choose wisely...
    • Sass welcome package!• 2 syntaxes: .sass and .scss (CSS-like)• Twitter Bootstrap and ZURB Foundation• Even more crazy features (extend, if, for...)Recommended blog:
    • CompassChris Eppstein - @chriseppstein (Sass core)CSS3, Spriting, Grids, Typography, Data-URLs,Cross-browser, assets path, tons of helpers...@import "compass/css3/border-radius";.button { @include border-radius(10px);}
    • sonspring.com
    • Workflow
    • Installing and RunningJust Sass:> gem install sass> sass --watch <path>Sass + Compass:> gem install compass> compass create <path>> compass watch
    • Avoiding the command line Codekit
    • GUI compilersCodekit, LiveReload, Less.app,Compass.app, Scout, Crunchapp, SimpLessCompass.app, Scout, Crunchapp,SimpLess, WinLess, LiveReload (alpha)Compass.app, Scout, Crunchapp, SimpLess
    • Syntax HighlightingEditors and IDEs that support Sass:VIM, Emacs, Sublime Text 2, TextMate, Eclipse,NetBeans, WebStorm, Visual Studio, PyCharm,RadRails, RubyMine, Komodo, Coda, GEdit, [...]
    • Project structure examplecss/ global.scss global.css currentpage.scss currentpage.css scss/ global/ _colors.scss _helpers.scss Underscore-prefixed files _mixins.scss dont generate .css files _reset.scss _typography.scss components/ _buttons.scss _popups.scss
    • DebuggingDebug mode> sass –-watch <path> --debug-infoFirebug plugin: FireSass
    • Techniques
    • Handy conversionsPixels to emsfont-size: (18px / $context) * 1em; // 1.125emPixels to percentages$wrapper_width: 1140px;.responsive-unit { width: percentage(200px / $wrapper_width) margin: percentage(15px / $wrapper_width)}
    • Nesting and Media Queries.menu-item { display: inline-block; @media screen and (max-width: 480px) { display: block; }}Sass 3.2 allows blocks as mixins parameters:.menu-item { display: inline-block; @include respond-to(small-screen) { display: block; }}
    • Mobile-first responsive design@media (min-width: 480px) {}
    • Mobile-first responsive design
    • Mobile-first responsive design// modern.scss@import "base";@media (min-width: 480px) { @import "480-up" }@media (min-width: 768px) { @import "768-up" }@media (min-width: 1200px) { @import "1200-up" }// ie.scss@import "base";@import "480-up";@import "768-up"; by Nicolas Gallagher ♥
    • Using nesting with Modernizr and IE.map { .menu-item { display: inline-block; .no-geolocation & { background: "map.png"; .ltie8 & { } display: inline;} zoom: 1; } }// ======== OUTPUT ======== // ======== OUTPUT ========.map {} .menu-item {}.no-geolocation .map {} .ltie8 .menu-item {}
    • Generating a color palette$base: #633;$complement1: adjust-hue($base, 180);$complement2: darken(adjust-hue($base, 180), 5%);$lighten1: lighten($base, 15%);$lighten2: lighten($base, 30%); by Joshua Johnson
    • OOCSS
    • OOCSSOOCSS is a popular solution for large-scale CSSwebsites by Nicole Sullivan (@stubbornella)Its core principle is to use multiple classes tomake objects inherit from each other<a class="button big-button">Its heavy for the DOM but very efficient interms of CSS file size in the long run
    • Facebooks DOM MOTHER OF DOM...
    • SASS has @Extend.button { background: #00f;}.big-button { @extend .button; width: 200px;}// ======== OUTPUT ========.button,.big-button { background: #00f }.big-button { width: 200px }
    • @Extend vs OOCSSIf you build a complex components librarywith @extend, youll have a LOT of selectors• @extend ruins your production CSS• OOCSS ruins your DOMMy opinion: At some point @extend mightovertake OOCSS when well have better tools(we debug seamlessly minified CSS already)
    • Preprocessors + OOCSSWithout @extend, preprocessors and OOCSSare perfectly compatiblePreprocessors are for the stuff you dont wantin your production CSS (they help developers)OOCSS is for the stuff you want in yourproduction CSS (it is performant)
    • Developer Efficiency ChartParameters: Less Stylus Sass• DRY and file size OOCSS OOCSS OOCSS• Features• Community OOCSS Sass Less Stylus Naive CSS
    • By becoming web developers, you agreed onstaying up to date with all the new cool stuff.This is the new cool stuff :)
    • Thanks!verekia.com/slides/css-preprocessors by @verekia