Basic Grid Flex

grid.scss

/*
Grid Basic
Platform: Sass (.scss)
Original repository:
Author:
Paulo Tosi (paulotosi.com.br)
Version: 0.1.0
* /

/*************************************************************************************************/
/* Configuração para GRID */
/*************************************************************************************************/
$tablet: 769px;
$desktop: 992px;
$widescreen: 1152px;
$fullhd: 1344px;

$gap: 15px;
$column: 12;
$grid-margin-negative: -#{$gap};

/*************************************************************************************************/
/* Column */
/*************************************************************************************************/

@mixin col($number-col: 'flex') {
	@if ($number-col != flex) {
		width: percentage(($number-col / $column));
    		padding-left: $gap;
    		padding-right: $gap;
		box-sizing: border-box;
	} @else {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		box-sizing: border-box;
	}
}


@for $i from 1 through $column {
  .th-#{$i} {
    @include col($i)
  }
}


/*************************************************************************************************/
/* Offset */ 
/*************************************************************************************************/

@mixin offset($number-of-offset) {
	$number-of-offset: percentage(($number-of-offset / $column));
	margin-left: $number-of-offset;
	box-sizing: border-box;
}

@for $i from 1 through $column {
  .th-offset-#{$i} {
    @include offset($i)
  }
}


/*************************************************************************************************/
/* CONTAINER */
/*************************************************************************************************/

@mixin media-md {
    @media (min-width: #{$widescreen}) {
        @content;
    }
}

@mixin media-lg {
    @media (min-width: #{$fullhd}) {
        @content;
    }
}

%container {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	box-sizing: border-box;
	max-width: 100%;
	margin: auto;
  
  @include media-md {
    width: $desktop;
  }
  
  @include media-lg {
    width: $widescreen;
  }
	
}


/*************************************************************************************************/
/* Class container   */ 
/*************************************************************************************************/

.l-container {
	@extend %container;	
}

/*************************************************************************************************/
/* Como utilizar   */ 
/*************************************************************************************************/

//pode fazer assim pelo sass
div {
  @include col(5);
  @include offset(2);
  @include media-md {
    @include col(8)
  }
}

Achei interessante mas tenho duas dúvidas:

-- O que seria o th? ( em relação à nomenclatura )

Neste trecho:
@mixin col($number-col: 'flex') { [...]

No caso de ser flex, a coluna sempre ocuparia 100% do tamanho?

De resto, acho que a melhor forma de avaliar é na prática mesmo, obrigado!

@Macronaut obrigado pelo feedback. Vamos lá para esclarecimento de suas dúvidas:

O "th" é apenas uma nomenclatura para a empresa que estava trabalhando, mas poderia ser muito bem substituído por "col".

Referente ao trecho:
@mixin col($number-col: 'flex') { [...] }

Quando ele cair nessa condição ele apenas vai colocar os itens que estão dentro do container apenas como flex, recebendo por padrão o flex box default.

Talvez podemos melhor-lo. Obrigado 0/