Engineer | Innovator | Entrepreneur

Nested dropdown is one of the most important elements web developers look for while designing the website. Materialize CSS Framework does not offer nested dropdown in their repository. In this tutorial, you will be learning how to create a nested dropdown menu in Materialize CSS framework.

Creating Dropdown Button:

Initially, we need to…

Functions in SASS / SCSS

Functions permit you to characterize complex operations on SassScript values that you can reuse all through your stylesheet. They make it simple to extract out standard formulae and practices in a decipherable manner. The function helps in computing calculations and return values in SASS / SCSS.

Functions are characterized utilizing…

Maps in SASS

Maps in SASS / SCSS hold key-value pairs, and it enables users to lookup values with the help of keys. Defining Maps is similar to defining a variable; it starts with $ following which we type the Map name. Within braces, we add key: value pairs. For example:

$font-weights: (
"regular": 400,
"light": 300,
"bold": 700

It’s easy to leverage SASS Maps by calling the map-get(variable, value) function. In place of the variable, we can add here font-weight and the corresponding value will automatically suggest based on the key-value name we define in the variable.


font-weight: map-get($font-weights, regular);


The equivalent CSS will be as follows:


font-weight: 400;


Dinesh Kumar R

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store