A Better CSS: LESS and SASS


While Cascade Styling Sheets make it easier to design websites, it still has a couple of quirks that could be better handled with LESS or SASS. LESS and SASS stand for Leaner CSS and Syntactically Awesome Style Sheets. We are going to review 

Quirks Of CSS:CSS and Clarity create effective webpages

  • Duplication issues 

  • Cascading Avalanches – difficult to see exactly a cascading rule originates.  Not easy to track down which rules affect which cases 

  • The “Color Problem” – end up doing a lot of copy and replace if we have to change color codes that are repeated. 

  • No calculation   

LESS – The LESS section of this tutorial talks about examples and uses of different functionalities of LESS. And lightly touches on how it improves your CSS.LESS and CSS Styling make your pages more optimal

  • Dynamic Stylesheet language that brings in basic programming functionalities and compiles down to CSS 

  • Allows functions, mixins, variables, operations, nested rules, etc. 

  • Easy to convert – all .css files can be renamed to valid .less files 

  • Allows for more complex and more maintainable code in your design. 

  • Improves re-usability, readability – easily see relationships between styles

SASS – The SASS section talks about examples and uses of SASS (Syntactically Awesome Style Sheets) functionalities, different syntaxes, and how to compile your SASS file(s).  And it also lightly touches on how it differs from LESS and how it improves our CSS.SASS and CSS help boost your websites functionality!

  • Dynamic spreadsheet language that allows variables, rules, importing, extending, mixins, functions, and control directives. 

  • Improves re-usability, readability, and maintenance 

  • Allows you to apply structure and modularize your designs 

  • Enables control flow, templates and more to your styling

Other Resources:  LESS vs. SASS

While the Plural Sight tutorial gave a high level overview of the similarities of LESS and SASS and how it improves CSS, I wanted to dig more into the pros and cons of using one or the other. Personally while going through the tutorial, LESS appealed more because of simplicity.  Since LESS is built on Javascript, you just need to install a JS Library to your HTML.  And it also provides clearer error notifications and a more comprehensive documentation. But SASS is an overall more powerful option. Even though SASS requires a little more installation, it also uses Compass which offers several useful features (CSS3 Mixins, Typography, Grid Layout, etc) all in one package.  These are separate extensions in LESS. In summary, choosing which one comes down to simplicity vs power.