CSS preprocessing - Sass vs Less by Brady Sammons

953 views
644 views

Published on

A great presentation by Brady Sammons. Presented at the Tech-in-motion SF july meetup.

This presentation was not created or compiled by me. I am just sharing it on behalf of the community.

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
953
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

CSS preprocessing - Sass vs Less by Brady Sammons

  1. 1. { CSS Preprocessing } With LESS & Sass By: Brady Sammons bradysammons.com | brady@brightroll.com | @soulrider911
  2. 2. { Terms }
  3. 3. {Preprocessing} Preprocessing is a method of extending the feature set of CSS by first writing the style sheets in a preprocessed language, then compiling the code to pure CSS syntax that we are all use to.
  4. 4. { Compile } A compiler is a computer program(s) that transforms source code written in a programming language (the source language) into another computer language (the target language).
  5. 5. { Sass } Syntactically Awesome Stylesheets - Sass is an extension of CSS, adding nested rules, variables, mixins, operators, selector inheritance, and more. It’s translated to well- formatted, standard CSS using the command line tool or a web-framework plugin. Sass is based in Ruby Designed by Hampton Catlin developed by Nathan Weizenbaum – 2007
  6. 6. { LESS } Write less do more - Less language provides the following mechanisms: variables, nesting, mixins, operators and functions; then converted into standard css via javascript or an application. Less is based in javascript. Designed by Alexis Sellier 2009, was influenced by SASS.
  7. 7. { How Does it Work? }
  8. 8. { The Machine } LESS / SASS Metalanguage Document Ruby / JS Output CSS MR. COMPILER
  9. 9. { Who Cares? }
  10. 10. { A Few Reasons Why } • It Saves time • This is what CSS should have been to begin with • Makes your CSS less repetitive (DRY) • Easier to maintain • Easier to read • Make your websites look better • More fun to code • Extendable - Compass, LessHat
  11. 11. { Possible Deterrents } • Change of workflow • Another syntax to learn • Rely’s upon a compiler software • Harder to debug • Less documentation that CSS alone • Don’t know how to set it up
  12. 12. { Differences } @ LESS VS $ Sass
  13. 13. { Example } Sass $ $ltgreen: #79c777; #header { Font-Size: 1.1em; h2 { color: $ltgreen; } } LESS @ @ltgreen: #79c777; #header { Font-Size: 1.1em; h2 { color: @ltgreen; } } #header { Font-Size: 1.1em; } #header h2 { color: #79c777; } CSS (compiled)
  14. 14. { Comparison } SASS ($)LESS (@) Operators #header{ width: (@headerW - 50) * 2; } #header{ width: ($headerW - 50) * 2; } Frameworks Language Base LESSHat, LESS ELEMENTS Javascript (originally Ruby) COMPASS Ruby Functions lighten(#ff0000, 10%); Saturate(#ff0000, 20%); lighten(#ff0000, 10%); Saturate(#ff0000, 20%); Mixins @mixin { width: 50%; : ; } { width: 50%; : ; } Parametric Mixins ( px){ : ; : ; : ; } ( px){ : ; : ; : ; } Variables @plainRed: #ff0000; : #bce7f3; $plainRed: #ff0000; : #bce7f3;
  15. 15. { Compiling Apps } LESS SASSBOTH Less.app Codekit Fire.app Scout Livereload
  16. 16. { Some Live Code }
  17. 17. { Game On }

×