CSS preprocessing - Sass vs Less by Brady Sammons

  • 392 views
Uploaded 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.

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
392
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
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 }