CSS Preprocessors – SASS and 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/


  • 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


Package Managers

Package – A package can be a GitHub shorthand, a Git endpoint, a URL, and more. Eg: bootstrap

Package Manager – Package manager is collection of software  tools that automates the process of installing, configuring, upgrading and removing any programs

  1. npm – node package manager
  2. bower – package manager for web
    • bower is a command line utility
    • has to be installed with npm
    • Installing bower: (-g installs it globally)
      • npm install -g bower
    • bower requires node, npm and git
    • bower init to initialize bower.json file
    • Installing packages with bower
      • bower install <package>
      • bower install <package> -S (for saving in bower.json)
      • bower install <package> -D (for saving in bower.json as devdependency)
    • Issues git not found event after having git client tool
      • solution:
        • locate your git.exe file
        • It’s usually located here – C:\Users\user\AppData\Local\GitHub\PortableGit_dGUID\cmd
        • GUID changes when the git gets updated
        • copy the path and paste it in command line
        • enter ‘git’ command, if you see git help options that means git is working
        • now copy the path, remove ‘.git.exe’ at the end and paste into PATH variable
        • close and reopen the command line and try entering git command again. If everything goes right, git works!
      • package.json file gets created with all dependencies. If not just enter, ‘npm init’ command
  3. composer – A dependency manager for php
    • Installing composer
      • https://getcomposer.org/download/
      • The installer will download composer for you and set up your PATH environment variable so you can simply call composer from any directory.
    • Installing packages with composer:
      • composer require twbs/bootstrap
    • For php
      • Eg:
        • composer require phpmd/phpmd
        • composer require –dev phpunit/phpunit
          • Using phpunit from commandline
            • .\vendor\bin\phpunit testFile.php
            • Same pattern of execution for other modules installed with composer
    • composer.json file gets created with all dependencies




Note: Bootstrap uses Grunt for its build system, with convenient methods for working with the framework. It’s how we compile our code, run tests, and more.  (http://getbootstrap.com/getting-started/)

Grunt commands:

  1. grunt dist
    • Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files.
  2. grunt watch
    • Watches the Less source files and automatically recompiles them to CSS whenever you save a change.
  3. grunt test
  4. grunt docs
    • Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via bundle exec jekyll serve.
  5. grunt
    • Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Requires Jekyll.

  • npm required for Grunt
  • Grunt is a javascript task runner
    • compress everything – all done by grunt
    • compiles Sass into css
    • compress JavaScript, CSS, HTML files
    • Combine JS files into a single file
    • Concatenates JS & CSS files
  • Build system with grunt
  • Software dependencies:
    • Node – javascript runtime
    • npm – package manager
    • grunt cli
    • grunt
    • plugins
  • Installing grunt
    • npm install grunt
    • pakcage json has to be created
      • npm init – creates the package json
      • package name has to be defined and shouldn’t be ‘grunt’
  • Installing grunt cli
    • npm install -g grunt-cli
  • Running grunt
    • grunt
  • Running grunt tasks
    • grunt taskname
  • Using existing project:
    • npm intall – will install all dependencies
  • Plugins:
    • grunt has so many plugins
      • loadNpmTasks – loads the default configs
      • To concat, you need to load the grunt-contrib-concat & to watch the changes grunt-contrib-watch
      • Installing grunt-contrib
        • npm install grunt-contrib-concat –save -dev
        • similar commands for all plugins
    • Handlebars:
    • Uglify:
      • beautifies js code
    • Sass:
      • Complies sass files to css
      • Installing grunt-contrib-sass