[html scss] Reusable SCSS mixin for screen-scalable responsive design

#css #scss #mobile

There is a design in Figma (or Photoshop) with 3 layouts for each page (desktop 1920, tablet 834 and mobile 320).
We have to do pixel-perfect HTML coding by represented layouts for respective screen sizes, and scalable responsive design for intermediate screen sizes, which keep the design while next layout breakpoint.
That is, our result must be the same as our design on 1920px, and keep this view until 834px reducing proportionally.

This task can be done in several ways, but I want to get the styles directly from Figma into px without manual conversions. But screen-scaling design must be made on vw...

There is a solution. The idea is very simple. Really you don't have to ponder about scaling design. It might be solved by simple SCSS function which will be calculate scaling automatically.

First, we need to declare 3 functions for converting pixels measure to vw measure (for desktop, tablet, and mobile).

🔥 codepen https://codepen.io/ktr92/pen/gOBxbZb

SCSS:

@function get_vw_large($value) {
    $vw-viewport-large: 1920; // there is design breakpoint for desktop screen view
    $vw-context: $vw-viewport-large * 0.01 * 1px;
    @return $value/ $vw-context * 1vw;
    @return $value;
}

@function get_vw_medium($value) {
    $vw-viewport-medium: 834; // there is design breakpoint for tablet screen view
    $vw-context: $vw-viewport-medium * 0.01 * 1px;
    @return $value/ $vw-context * 1vw;
    @return $value;
}

@function get_vw_small($value) {
    $vw-viewport-small: 834; // there is design breakpoint for mobile screen view
    $vw-context: $vw-viewport-small * 0.01 * 1px;
    @return $value/ $vw-context * 1vw;
    @return $value;
}

Then we can use it!

Throughout the project we need wrap all PIXEL-based styles on a function.
For example, we have a block with the following styles (from Figma desing):

CSS:

.block{ 
  font-size: 18px;
  line-height: 23px;
  margin-bottom: 2px;
  padding: 20px;
}

It must be rewritten in the following way:

.block {
  font-size: get_vw_large(28px);
  line-height: get_vw_large(33px);
  margin-bottom: get_vw_large(42px);
  padding: get_vw_large(20px);
}

So it will be converted to vw value and we will see the following styles in a browser:

    font-size: 0.9375vw;
    line-height: 1.19792vw;
    margin-bottom: 0.10417vw;
    padding: 1.0416666667vw;

🔥We can use any breakpoints for @media queries, but our result will be perfect on the each design breakpoint (1920, 834, 320). For tablet breakpoint it must be rewritten in the following way:

@media (max-width: 1023px) {
  .block {
    font-size: get_vw_medium(18px);
    line-height: get_vw_medium(23px);
    margin-bottom: get_vw_medium(20px);
    padding: get_vw_medium(20px);
  }
}

For the mobile breakpoint it has the following styles (from Figma desing):

.block{ 
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 20px;
}

It must be rewritten in the following way:


@media (max-width: 480px) {
  .block {
    font-size: get_vw_small(13px);
    line-height: get_vw_small(18px);
    margin-bottom: get_vw_small(20px);
    padding: get_vw_small(20px);
  }
}