SUSY and SASS Mixins


In today’s development world we need to create websites with layouts that can work with potentially an unlimited number of viewports on all types of screensizes. Traditional layout grids help with the initial quick prototype, but are difficult to modify as most introduce a big bloated mess of code which, odds are, we don’t even use 90% of. Unfortunately, the grid frameworks like Bootstrap and Foundation lack the ability for you to customize your grids to the extent required. This is one of the commonly distributed issue over the industry.

The another problem which is common when we look around while we as developers and SASS beginners are facing is, How many times have we had to define width and height values in our last project? How many times have we Googled how to do a triangle in CSS?

To overcome both these above prevailing issues, one of the best solutions in the market that is recommended is using SUSY and SASS Mixins respectively.

In brief, Susy is one of the most powerful layout engine extensively used. It's flexible and extensible nature of creating grid frameworks according to the site requirement makes it altogether more acceptable and unique in the market. Secondly to optimize the effort on sass code writing, reduction in code redundancy and enhancing code readability, implementation and recurrent usage of SASS Mixins is must. Inculcating such habit will help us ease our lives to a great extent and increase our productivity exponentially.

This session will highlight on followings :-​

  • What is Susy and its Basics

  • Installation of Susy in your project

  • Implementation of Susy with an example project

  • Benefits of Susy

  • What are SASS Mixins

  • Implementation of readily available SASS Mixins

  • Creating custom SASS Mixins

  • Advantages of SASS Mixins

Session Track


Experience Level


Drupal Version