Performance impact using mixins in a CSS grid system

Suppose you want to build your own grid, and unlike that found in Bootstrap , you want to do something semantic. For this you type mixins with the SCSS syntax.

Let's suppose you have something like this:

@mixin coluna($col){
  width: calc( ((100% * ($col)) / 12) - (2 * $col-marging) );
  margin: $col-marging;
  box-sizing: border-box;
}

And then when you want to use some element, just call coluna , like this:

.logo{
  @include coluna(1);
}

The problem is that every time you do this (and will do so for various page elements), the processed CSS will have a gain of 4 lines per element. If you use this 20 elements are already 80 more lines of code (not to mention the calculation that is being made whose performance impact I am completely unaware of).

Some people say that this is a bad idea and others that it is good practice to keep the semantic code. But what is the real impact of this particular approach to creating grids ?