CSS vs LESS vs SASS ...vs Front-end developer 03. 04. 2013. by Mladen Đurić #9 

MLADEN ĐURIĆ @macmladen mladen@bluefish.rs • Apple • Web Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs A LITTLE BIT OF CSS HISTORY Standard Initiated Finished CSS 1 ~1994 1997 CSS 2 1997 1998 CSS 2.1 ~1998 2010? CSS 3 1998 (!) - CSS 4 2011 :D 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs WHAT CSS SOLVES? SEPARATION OF STRUCTURE FROM CONTENT ! Makes styles reusable By inheritance, brings some logic in

Look! Styles and colors



Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs WHAT DOES NOT CSS SOLVE? Lack of: • variables • control structures • computations • flexibility derived from previous 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs WHAT DO WE DO THEN? Call Rasmus*! or... *Rasmus Lerdorf (born 22 November 1968 in Qeqertarsuaq, Greenland) is a Danish programmer with Canadian citizenship. He is best known for creating the PHP scripting language 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs WHAT DO WE DO THEN? Call these guys: Those are for CSS like PHP is for HTML (kinda). 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs DO YOU...? 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs LESS AND SASS CREATORS LESS was developed by Alexis Sellier, more commonly known as cloudhead. It is now mantained and extended by the LESS core team. Nathan Weizenbaum is the primary designer of Sass, and has been the main developer since its inception. He lives in Seattle, Washington and will be going to work for Google once he finishes his last year at the University of Washington. Chris Eppstein joined the Sass team in late 2008. He and Nathan have designed Sass from version 2.2 on. Chris is the creator of Compass, the first Sass-based framework. Chris lives in San Jose, California with his wife and daughter. 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs WHAT DOES THEY SOLVE? What CSS is missing: • variables • control structures • computations • flexibility derived from previous 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs LESS lesscss.org • Server or client side • To compile to CSS, node.js is needed • LESS can evaluate JavaScript • LESS (appears) easier to use 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs LESS SAMPLE 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs LESS BASED FRAMEWORK 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs SASS sass-lang.org • Server side • To compile to CSS, Ruby is needed • SASS (appears) to support more complex structure • Additional libraries like Compass and Bourbon 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs FLAVOURS: SASS vs SCSS 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs SASS LIBRARY COMPASS 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs SASS LIBRARY BOURBON 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs SASS FRAMEWORK 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs SASS FRAMEWORK SUSY 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs NATHAN SMITH, 960.GS 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs LESS AND SASS TOOLS There are many tools that can help you with LESS and SASS Tool SimpLESS CodeKit LiveReload Scout Platform Windows Mac Linux - Mac - Windows (alpha) Mac - Windows Mac - Price free $25 $9.99 free Supported LESS Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript and Compass LESS, SASS, Compass, Stylus, CoffeeScript, IcedCoffeeScript, Eco, SLIM, HAML, Jade SASS 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs KEY CONCEPTS  Variables  Mixins  Parametric Mixins  Selector Inheritance  Nested Rules  Color Functions  Conditions And Controls  Namespaces  Scope  Importing  String Interpolation  Escaping  Output Formatting  JavaScript Evaluation (LESS Only) 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs VARIABLES $red: #ff0000; @red: #ff0000; Sass Less 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs MIXINS Sass Less @mixin perspective ($value: 1000) { -webkit-perspective: $value; -moz-perspective: $value; -ms-perspective: $value; perspective: $value; } .perspective (@value: 1000) { -webkit-perspective: @value; -moz-perspective: @value; -ms-perspective: @value; perspective: @value; } .transform { @include perspective (2000); } .transform { .perspective (2000); } 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs SELECTOR INHERITANCE Sass Less .border { border: 1px solid #fff; } .box { @extend .border; } N/A .border, .box { border: 1px solid #fff; } Prints 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs NESTED RULES Sass Less .box { @extend .border; &.selector { background: #000; } } .border.selector, .box.selector { border: 1px solid #000; } Prints .box { &.selector { background: #000; } } .box.selector { border: 1px solid #000; } Prints 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs COLOR FUNCTIONS Sass Less adjust-hue(#cc3, 20deg) => #9c3 saturate(#cc3, 10%) => #d9d926 desaturate(#cc3, 10%) => #bfbf40 lighten(#cc3, 10%) => #d6d65c darken(#cc3, 10%) => #a3a329 @see http://bit.ly/nyBv1M saturate(#cc3, 10%) => #d9d926 desaturate(#cc3, 10%) => #bfbf40 lighten(#cc3, 10%) => #d6d65c darken(#cc3, 10%) => #a3a329 @http://bit.ly/fzdbZK 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs CONDITIONALS Sass Less /* Sample Sass "if" statement */ @if lightness($color) > 30% { background-color: #000; } @else { background-color: #fff; } /* Sample Sass "for" loop */ @for $i from 1px to 10px { .border-#{i} { border: $i solid blue; } } N/A 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs BOTTOM LINE  Both LESS and SASS allow you to save time and give you the ability to reuse code  CSS has evolved and LESS and SASS are examples of the new standards  Learn CSS and good practices first, preprocessors are not a replacement for good coding, planning and design  Most of all - DRY practices (Don't Repeat Yourself)  CSS 3 browser prefixes  Responsive design  Other people are using it, so you want to have a clue  Efficiency  Better organization  Faster sites and better SEO 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs RESOURCES: http://bit.ly/n01ySn (Smashing LESS vs Sass compared) http://lesscss.org (About Less) http://bit.ly/OQttYb (Sassy 101 PDF) http://compass-style.org (CSS Framework) http://foundation.zurb.com (CSS Framework) http://twitter.github.com/bootstrap (CSS Framework) http://compass.handlino.com (Compass App) http://www.manning.com/netherland (Sass and Compass in Action) http://sonspring.com/journal/sass-for-designers (Nathan Smith) http://css-tricks.com/sass-vs-less/ (Chriss Coyer) http://www.hongkiat.com/blog/sass-vs-less/ (Very usefull site) http://thesassway.com/articles/sass-vs-scss-which-syntax-is-better http://www.1stwebdesigner.com/css/power-sass-why-use-css-preprocessors/ https://gist.github.com/chriseppstein/674726 http://www.zivtech.com/blog/css-suckers-introduction-sass-compass http://www.zivtech.com/blog/using-breakpoint-10-responsive-web-design-project http://www.zivtech.com/blog/responsive-drupal-theme-50-lines-code-or-less http://www.zivtech.com/blog/responsive-web-design-and-drupal 

Blue Fish d.o.o. • Novi Sad • Srbija • http://bluefish.rs • office@bluefish.rs THANKS!