DaFED_9: CSS vs LESS vs SASS vs Frontend Designer

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

• oﬃce@blueﬁsh.rs WHAT CSS SOLVES? SEPARATION OF STRUCTURE FROM CONTENT ! Makes styles reusable By inheritance, brings some logic in <!DOCTYPE html> <html> <body> <div style="opacity:0.5;position:absolute;left:50px;width: 300px;height:150px;background-color:#40B3DF"></div> <h3>Look! Styles and colors</h3> <div style="letter-spacing:12px;">Manipulate Text</div> <div style="color:#40B3DF;">Colors <span style="background-color:#B4009E;color:#ffffff;">Boxes</span> </div> </div> </body> </html>

• office@bluefish.rs WHAT DOES NOT CSS SOLVE? Lack of: • variables • control structures • computations • flexibility derived from previous

• oﬃce@blueﬁsh.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

• oﬃce@blueﬁsh.rs WHAT DO WE DO THEN? Call these guys: Those are for CSS like PHP is for HTML (kinda).

• oﬃce@blueﬁsh.rs DO YOU...?

• 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.

• office@bluefish.rs WHAT DOES THEY SOLVE? What CSS is missing: • variables • control structures • computations • flexibility derived from previous

• oﬃce@blueﬁsh.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

• oﬃce@blueﬁsh.rs LESS SAMPLE

• oﬃce@blueﬁsh.rs

• oﬃce@blueﬁsh.rs LESS BASED FRAMEWORK

• oﬃce@blueﬁsh.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

• oﬃce@blueﬁsh.rs FLAVOURS: SASS vs SCSS

• oﬃce@blueﬁsh.rs SASS LIBRARY COMPASS

• oﬃce@blueﬁsh.rs SASS LIBRARY BOURBON

• oﬃce@blueﬁsh.rs SASS FRAMEWORK

• oﬃce@blueﬁsh.rs SASS FRAMEWORK SUSY

• oﬃce@blueﬁsh.rs NATHAN SMITH, 960.GS

• oﬃce@blueﬁsh.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

• oﬃce@blueﬁsh.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)

• oﬃce@blueﬁsh.rs VARIABLES $red: #ff0000; @red: #ff0000; Sass Less

• oﬃce@blueﬁsh.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); }

• oﬃce@blueﬁsh.rs SELECTOR INHERITANCE Sass Less .border { border: 1px solid #fff; } .box { @extend .border; } N/A .border, .box { border: 1px solid #fff; } Prints

• oﬃce@blueﬁsh.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

• oﬃce@blueﬁsh.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

• oﬃce@blueﬁsh.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

• 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

• oﬃce@blueﬁsh.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

• oﬃce@blueﬁsh.rs THANKS!

DaFED_9: CSS vs LESS vs SASS vs Frontend Designer

DaFED_9: CSS vs LESS vs SASS vs Frontend Designer

More Decks by Mladen Đurić

Other Decks in Programming

Featured

Transcript