css preprocessors

CSS Preprocessors – SASS and LESS

Sainag Leave a comment

LESS:

  • JavaScript based (nodejs is required)
  • ‘@’ to define
  • backwards compatible – rename .css to .less and start building
  • Advantages:
    • Using variables for re-using same css
    • Mixins – using css of 1 item in another item
    • Mixins with paranthesis – function with parameters – you can send custom values
    • Nested styling
    • Nested conditionals – for mobiles & desktops etc
      • conditional styling
    • Simple arithmetic operations in styling. eg: font-size * 2 etc
    • Commenting – single line commenting available
    • Importing
      • can import other .less files
        • eg: @import filename;
      • You have to put the correct file name including ‘_’ if there are any.
      • No need to add the extension
    • Extend/Inheritance:
      • &:extend selector
    • Image paths as variables:
      • eg:
        • @images: “images/”
        • using it:
          • background: url(“@{images}name.jpg”);
    • http://lesscss.org/features/

SASS:

  • Ruby based
  • ‘$’ to define
  • .sass is shorthand version with no semicolons and braces etc
  • .scss is normal kind of less (you’ll use .scss files all over)
  • Ruby is required to get sass but can install with npm and start using it like LESS
  • Advantages:
    • variables
    • nesting
    • partials:
      • Good practice is to use ‘_’ for the files that are not going to be included in the html. These files are only used in other .scss files
      • @import filename to include this in other file. You don’t need to add ‘_’ and ‘.scss’ for import command
    • Extend/Inheritance:
      • Useful when you have various size panels (big/medium/small)
      • for using one css class in other class, use @extend selector
    • Mixins – is like function and passing parameters to it
      • you can send custom values
      • Eg:
        • @mixin border-radius($radius){ -webkit-border-radius:$radius; -moz-border-radius:$radius; -ms-border-radius: $radius; border-radius:$radius}
        • .little-panel{ @include border-radius(5px);}
        • .big-panel{ @include border-radius(10px);}
    • Operations
      • Arithmetic operation/ adding values etc
      • multiply background color (*1.5) to get lighter version of the colour
    • http://sass-lang.com/guide

Ref: