Build responsive websites with just 1 function

Building responsive websites in today's world can be a hell lot of work. Mordern CSS doesn't make it any easier when using a ton of media-queries for each device screen size. I have been building website for more than 4 years and the only thing I hate about my job is building resposive pages for screens that people may not even get to use. My laziness led me to come up with an easier and scalable way of making my websites truely responsive.

Welcome Sass and mixers. Sass is a CSS framework that allows you to create functions called mixers. Now we can create a functions that converts our sizes to a responsive value when the screen size changes.

First we need to define a viewpoint

$custom-viewport: 1920;

This viewpoint is the neutral screen size you are building for.

Then create the main function, feel free to call it anything. Let's call it get-vw today

$custom-viewport: 1920;

@function get-vw($font) {
  $custom-context: $custom-viewport * 0.01 * 1px;
  @return $font / $custom-context * 1vw;
}

We are 90% done, now all that is left is to know how to use it.
Simple wrap the function arround all your px values. Example

h1 {
  font-size: CustomResponsive(36px); // Font size now dynamically adapts!
}

Well done, you have archived responsiveness.