Your SlideShare is downloading. ×
CSS preprocessing - Sass vs Less by Brady Sammons
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS preprocessing - Sass vs Less by Brady Sammons

448
views

Published on

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

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
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
448
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. { CSS Preprocessing } With LESS & Sass By: Brady Sammons bradysammons.com | brady@brightroll.com | @soulrider911
  • 2. { Terms }
  • 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. { 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. { 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. { 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. { How Does it Work? }
  • 8. { The Machine } LESS / SASS Metalanguage Document Ruby / JS Output CSS MR. COMPILER
  • 9. { Who Cares? }
  • 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. { 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. { Differences } @ LESS VS $ Sass
  • 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. { 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. { Compiling Apps } LESS SASSBOTH Less.app Codekit Fire.app Scout Livereload
  • 16. { Some Live Code }
  • 17. { Game On }

×