The Future of CSS and JavaScript Today Daniel Laughland Forward Thinking

fast. forward. thinking..scss.sass.less.ts.coffee.min.css.min.js

Why Use Pre-Processors? Repetition Utility Classes Browser Prefixes Monolithic Files function s as Classes var self = this; "0" == true Awkward Namespacing fast. forward. thinking.

Concise, Consistent, and Reusable fast. forward. thinking.

Nested Rules #header h1 { font-size: 200%; } #header a { text-decoration: none; } #header nav { float: right; screen and (max-width:480px) { #header nav { float: none; } } fast. forward. thinking.

Nested Rules #header { h1 { font-size: 200%; } a { text-decoration: none; } nav { float: right; screen and (max-width:480px) { nav { float: none; } } fast. forward. thinking.

Variables fast. forward. thinking. h1, h2 { color: #D9A164; }.callout { background-color: #D9A164; } li:before { content: " "; color: #D9A164; }

Variables $orange-peanut: #D9A164; h1, h2 { color: $orange-peanut; }.callout { background-color: $orange-peanut; } li:before { content: " "; color: $orange-peanut; } fast. forward. thinking. SASS: $variable SASS: $variable

Mixins … div.right { float: right; margin: 1em; }.box { border: 1px solid black; padding: 1em; } fast. forward. thinking.

Mixins fast. forward. thinking. … div.right { float: right; margin: 1em; }.box { border: 1px solid black; padding: 1em; } #related-links {.right;.box; } [LESS]

Mixins fast. forward. thinking. … right { float: right; margin: 1em; box { border: 1px solid black; padding: 1em; } #related-links box; } [SASS]

boxify($box-color, $width) { width: $width – 2px; border: 2px solid $box-color; background-color: lighten($box-color, 50%); margin: $width / 15; } #callout boxify(#B1946C, 150px); } fast. forward. thinking.

Functions Color Manipulation saturate() green() fade-out() hsl() complement() Math and Units round() max() (1in + 12px) fast. forward. thinking.

Ported to many platforms Simple setup & integration Limited capability Bootstrap Kendo UI Built on Ruby Many scripting options Powerful add-on libraries ZURB Foundation Sencha fast. forward. thinking.

Unified Syntax for Prefixed background(linear-gradient(top left, #333, #030)); Automatic Image all-my-icons-sprites; Detect Image Height and Width width: image-width('banner.jpg'); In-Line Base64 Encoding background: inline-image('pattern.png'); Built-In CSS "compass/reset"; fast. forward. thinking.

Tools for LESS/SASS Visual Studio 2012 Web Tools Update 2 Web Essentials 2012 Mindscape Web Workbench fast. forward. thinking.

Easier Structure and Code Safety fast. forward. thinking.

window.myApp.OrangePeanut = (function(ko){ function OrangePeanut() { this.forMe = ko.observable(true); } OrangePeanut.prototype.givePeanut = function() { if (this.forMe() === true) { console.log("I accept you!"); } return OrangePeanut; })(ko); ko.applyBindings(window.myApp.OrangePeanut);

window.myApp.OrangePeanut = function(){ var thisPeanut = this; this.forMe = ko.observable(true); this.givePeanut = function() { if (thisPeanut.forMe() === true) { console.log("I accept you!"); } }; ko.applyBindings(new OrangePeanut()); fast. forward. thinking.

class OrangePeanut { public Observable forMe; public void givePeanut() { if (forMe) console.log ("I accept you!"); } ko.applyBindings(new OrangePeanut());new fast. forward. thinking.

TypeScript Microsoft Open-Source Superset of ECMAScript 5 Well-Integrated with VS “It’s just JavaScript” Inspired by Ruby syntax Best with Node.JS fast. forward. thinking.

class OrangePeanut constructor: -> givePeanut: -> console.log "I accept you!" myPeanut = new OrangePeanut true fast. forward. thinking.

class OrangePeanut constructor: (data) = ko.observable data.forMe givePeanut: -> console.log "I accept you!" myPeanut = new OrangePeanut true fast. forward. thinking.

class OrangePeanut { forMe: KnockoutObservableBool; constructor(mine: boolean) { this.forMe = ko.observable(mine); } givePeanut() { if (this.forMe()) console.log("I accept you!"); } var myPeanut = new MyApp.OrangePeanut(true); fast. forward. thinking.

Thinking Forward Integration with Bundler/WebGrease Real Source Map Support in SASS New Language Features (like Generics) fast. forward. thinking.

Daniel Laughland fast. forward. thinking.