1 / 29

Web Pre-Processors

Forward Thinking. Web Pre-Processors. The Future of CSS and JavaScript Today Daniel Laughland. . scss. .sass. .min.css. .less. .min.js. . ts. .coffee. Why Use Pre-Processors?. Repetition Utility Classes Browser Prefixes Monolithic Files f unction s as Classes var self = this;

denim
Download Presentation

Web Pre-Processors

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Forward Thinking Web Pre-Processors The Future of CSS and JavaScript Today Daniel Laughland

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

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

  4. Concise, Consistent, and Reusable CSS Pre-Processors fast. forward. thinking.

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

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

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

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

  9. Mixins • <div id="related-links" class="box right">…</div> • .right{ • float:right; • margin:1em; • } • .box{ • border:1pxsolidblack; • padding:1em; • } fast. forward. thinking.

  10. Mixins • <div id="related-links">…</div> • .right{ • float:right; • margin:1em; • } • .box{ • border:1pxsolidblack; • padding:1em; • } #related-links { .right; .box; } [LESS] fast. forward. thinking.

  11. Mixins • <div id="related-links">…</div> • @mixin right{ • float:right; • margin:1em; • } • @mixinbox{ • border:1pxsolidblack; • padding:1em; • } #related-links { @include right; @include box; } [SASS] fast. forward. thinking.

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

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

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

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

  16. SASS+Compass Demo fast. forward. thinking.

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

  18. Easier Structure and Code Safety JavaScript Pre-Processors fast. forward. thinking.

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

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

  21. classOrangePeanut { • public Observable<bool>forMe; • publicvoidgivePeanut() { • if (forMe) console.log ("I accept you!"); •    } • } • ko.applyBindings(newOrangePeanut()); fast. forward. thinking.

  22. fast. forward. thinking.

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

  24. classOrangePeanut •    constructor: (@forMe)-> • givePeanut: -> •       console.log"I accept you!"if@forMe • myPeanut = new OrangePeanut true fast. forward. thinking.

  25. classOrangePeanut •    constructor: (data)-> • @forMe = ko.observabledata.forMe • givePeanut: -> •       console.log"I accept you!"if@forMe() • myPeanut = new OrangePeanut true fast. forward. thinking.

  26. classOrangePeanut{ • forMe:KnockoutObservableBool; • constructor(mine:boolean){ • this.forMe=ko.observable(mine); • } • givePeanut(){ • if(this.forMe())console.log("I accept you!"); • } • } • varmyPeanut=newMyApp.OrangePeanut(true); fast. forward. thinking.

  27. TypeScript Demo fast. forward. thinking.

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

  29. Daniel Laughland daniel.laughland@centare.com Twitter @jabberwik Thanks! fast. forward. thinking.

More Related