1
Suppose you want to build your own grid and that unlike the one found in Bootstrap, you want to do something semantic. For this you write mixins with the syntax of SCSS.
Let’s assume 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 in some element, just call the coluna, thus:
.logo{
@include coluna(1);
}
The problem is that every time you do this (and it will do for various page elements), the processed CSS will get a gain of 4 lines per element. If you use this 20 elements are already 80 lines more code (not to mention the calculation being done whose impact on performance I completely do not know).
Some people say this is a bad idea and others that it is good practice to maintain semantic code. But what is the real impact of this particular approach for creating grids?
So understand that the SASS code will be "transposed" to CSS, you can use webpack, Grunt, Gulp or even a CLI (command line) to do this. The focus is the development speed, the "transpilation" happens when you make change. No browser understands SASS, Stylus, Less, etc... Browsers understand JS, CSS and HTML.
– Bruno Wego