LESS vs. SASS
Upcoming SlideShare
Loading in...5
×
 

LESS vs. SASS

on

  • 4,624 views

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

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

Statistics

Views

Total Views
4,624
Views on SlideShare
4,520
Embed Views
104

Actions

Likes
4
Downloads
21
Comments
0

3 Embeds 104

http://www.redditmedia.com 91
http://blog.austinkpickett.com 11
https://twitter.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

LESS vs. SASS LESS vs. SASS Presentation Transcript

  • 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
  •  Variables Nested Rules Mixins and Inheritance Mathematical Operations Silent Comments Error DetectionWHAT’S WRONG WITH CSS?NOT MUCH… BUT IT COULD BE BETTER.
  • LESS GET STARTED1. Download LESS JavaScript file2. Start writing your .LESS file3. ???4. Profit.
  • 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
  • DIVE IN TO VARIABLES Colors Names Pixels Anything!LESSSASS
  • NESTED RULES TO GIVE FLOW Style with ease Readability Flow + efficiencyLESSSASS
  • PRO-TIP: THE AMPERSAND (&) Acts as parent element Acts as current elementLESSSASS
  • MIXINS & INHERITANCE Great for cross browser functions Add styles to other classes Use variables! SASS utilizes the @ characterLESSSASS
  • OPERATIONS AND FUNCTIONS Multiply Divide Add SubtractLESS
  • SILENT COMMENTS Comment like in PHP Won’t show up in CSS code Leave out new styles for futurecode
  • CONVERTING TO CSS LESS: SASS automatically converts to css> lessc styles.less > styles.css
  • ADVANCED Functions Importingsqrt(number);abs(number);sin(number);asin(number);cos(number);acos(number);tan(number);atan(number);
  • THANK YOU Follow me! www.austinkpickett.com @austinpickett