Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

LESS vs. SASS

5,496 views

Published on

This presentation was giving on 05/30/13 at WPI to introduce the LESS and SASS stylesheet preprocessors.

Published in: Technology
  • Be the first to comment

LESS vs. SASS

  1. 1. SAY WHAT?ANOTHER NEW LIBRARY? Not Quite. LESS and SASS are NOT frameworks They are preprocessors that improve on CSS Makes you more efficient Cuts down lines of code Built on DRY principle
  2. 2.  Variables Nested Rules Mixins and Inheritance Mathematical Operations Silent Comments Error DetectionWHAT’S WRONG WITH CSS?NOT MUCH… BUT IT COULD BE BETTER.
  3. 3. LESS GET STARTED1. Download LESS JavaScript file2. Start writing your .LESS file3. ???4. Profit.
  4. 4. INSTALLING SASS• We need to install Ruby www.ruby-lang.org• Now we need to install SASS• Create both main.sass and main.css files• Tell SASS to watch for any changes and autocompile> gem install sass> sass –watch main.sass:main.css
  5. 5. DIVE IN TO VARIABLES Colors Names Pixels Anything!LESSSASS
  6. 6. NESTED RULES TO GIVE FLOW Style with ease Readability Flow + efficiencyLESSSASS
  7. 7. PRO-TIP: THE AMPERSAND (&) Acts as parent element Acts as current elementLESSSASS
  8. 8. MIXINS & INHERITANCE Great for cross browser functions Add styles to other classes Use variables! SASS utilizes the @ characterLESSSASS
  9. 9. OPERATIONS AND FUNCTIONS Multiply Divide Add SubtractLESS
  10. 10. SILENT COMMENTS Comment like in PHP Won’t show up in CSS code Leave out new styles for futurecode
  11. 11. CONVERTING TO CSS LESS: SASS automatically converts to css> lessc styles.less > styles.css
  12. 12. ADVANCED Functions Importingsqrt(number);abs(number);sin(number);asin(number);cos(number);acos(number);tan(number);atan(number);
  13. 13. THANK YOU Follow me! www.austinkpickett.com @austinpickett

×