Sass maps: responsive design without routine computing

Foreword

Having received at my disposal another psd file, I already knew the list of requirements for the future site, one of the points of which included a responsive design. I started working on it with the layout of the main page and at the same moment I thought it would be nice not to use the well-known formula (target / context * 100 = result) given in Ethan Marcott's book “Responsive Web Design”, and immediately write the width of each block in pixels, having previously measured it in Photoshop, while getting everything in percent. The thought seemed good to me and I decided to google and try to find something on the issue that interests me, but, unfortunately, I could not find anything useful. Well, then, I thought, since there is nothing ready to help me, then you need to do it yourself. In this question, I relied on the Sass preprocessor, which more than once helped me to avoid unnecessary headaches and lines of code. In addition, I already knew about the existence of new data types in Sass such as lists and maps. The former was not interesting to me, but without the latter my undertaking would have collapsed. The main idea was that I know the width of each block and the sum of the widths of blocks with one nesting level is 100% and if the preprocessor allows me to process this data in the right way, then setting the width in pixels, I could get it in percent without worrying about computing.

Let's get started

For clarity, I made a conditional page prototype.

So, for example, it can be seen from the prototype that the block with the main-content class is on the same level of nesting with the block having the sidebar class, therefore the sum of their widths is 100%. It is also worth noting that nested blocks have an "ugly" width and if I acted according to the old scheme, I could not have avoided calculations by the formula. Let's reflect this structure in HTML:

To simplify the visual comparison of the site with the layout, let us set the width of the page-wrap block to be the same as in Photoshop. In the end, do not forget to change the value from pixels to percent, otherwise you will not see a responsive site.

.page-wrap {
  width: 1021px;
}

From the foregoing, it is known that the sum of the widths of the blocks with the main-content and sidebar classes is 100% and it would be possible to start calculations, but first you need to group this data, then the previously mentioned data type maps will help us.

$main: (main-content: 705, sidebar: 316);

Now you can write a small mixin that will take up the calculations directly.

@mixin grid($grid) {
  $totalWidth: 0;
  @each $className, $width in $grid {
    $totalWidth: $totalWidth + $width;
  }
  @each $className, $width in $grid {
    .#{$className} {
      width: (#{$width / $totalWidth * 100}) + '%';
    }
  }
}

We call our newly created mixin, passing it the variable $ main.

@include grid($main);

Now opening the file with the generated css styles, we see the percentage we need so much width.

.main-content {
  width: 69.04995%;
} 
.sidebar {
  width: 30.95005%;
}

Similarly, we calculate the widths for the block with the main-content class and the footer block.

$mainContent: (article-feature: 493, article-listing: 212);
@include grid($mainContent);
$footer: (social-list: 234, partners-list: 553, subscribe: 234);
@include grid($footer);

The contents of the css file:

.article-feature {
  width: 69.92908%;
}
.article-listing {
  width: 30.07092%;
}
.social-list {
  width: 22.91871%;
}
.partners-list {
  width: 54.16259%;
}
.subscribe {
  width: 22.91871%;
}

conclusions

Of course, this small mixin is not a silver bullet and is not intended to solve all the problems with page layout, but as a solution to a special case, it is quite suitable. I hope that he will at least slightly facilitate the work of layout designers and reduce the time spent on routine calculations.

PS In order to work with the type of maps compass version 1.0.0 is required.