Generated by SassMeister.com.

browserslist

last 10 versions

SassMeister-input-HTML.jade

.container
  .row
    .col-2.text-center.bg-secondary-dark-darkgreen Testo
    .col-2.bg-primary-normale-red Testo
  .row
    .col-2.text-center.bg-primary-dark-darkred Testo
    .col-2.text-right.bg-secondary-normale-green Testo
  .row
    .col-2.text-center.bg-third-normale-purple Testo
    .col-2.text-center.bg-third-dark-violet Testo

SassMeister-input.sass

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

$cols_ary: (1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12)

$direction-text: (left, right, center, justify)

$bgtype: (primary: (normale: red, dark: darkred), secondary: (normale: green, dark: darkgreen), third: (normale: purple, dark: violet))

@each $c in $cols_ary
  $cl : 13-$c
  .col-#{$cl}
    float: left
    width: percentage(1/$cl)
    //box-shadow: 0 0 0 1px black

@each $td in $direction-text
  .text-#{$td}
    text:
      align: $td

@each $bgt, $tpy in $bgtype
  @each $t, $p in $tpy
    .bg-#{$bgt}-#{$t}-#{$p}
      background:
        color: $p

::selection
  box-sizing: border-box
  
.container
  width: 100%
  position: relative
  
  .row
    padding: 5px
    
    &::after
      /*Micro Clearfix*/
      content: " "
      display: table
      clear: both

SassMeister-output.css

.col-12 {
  float: left;
  width: 8.33333333%;
}

.col-11 {
  float: left;
  width: 9.09090909%;
}

.col-10 {
  float: left;
  width: 10%;
}

.col-9 {
  float: left;
  width: 11.11111111%;
}

.col-8 {
  float: left;
  width: 12.5%;
}

.col-7 {
  float: left;
  width: 14.28571429%;
}

.col-6 {
  float: left;
  width: 16.66666667%;
}

.col-5 {
  float: left;
  width: 20%;
}

.col-4 {
  float: left;
  width: 25%;
}

.col-3 {
  float: left;
  width: 33.33333333%;
}

.col-2 {
  float: left;
  width: 50%;
}

.col-1 {
  float: left;
  width: 100%;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.bg-primary-normale-red {
  background-color: red;
}

.bg-primary-dark-darkred {
  background-color: darkred;
}

.bg-secondary-normale-green {
  background-color: green;
}

.bg-secondary-dark-darkgreen {
  background-color: darkgreen;
}

.bg-third-normale-purple {
  background-color: purple;
}

.bg-third-dark-violet {
  background-color: violet;
}

::-moz-selection {
  box-sizing: border-box;
}

::selection {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.container {
  width: 100%;
  position: relative;
}
.container .row {
  padding: 5px;
}
.container .row::after {
  /*Micro Clearfix */
  content: " ";
  display: table;
  clear: both;
}

SassMeister-rendered.html

<div class="container">
  <div class="row">
    <div class="col-2 text-center bg-secondary-dark-darkgreen">Testo</div>
    <div class="col-2 bg-primary-normale-red">Testo</div>
  </div>
  <div class="row">
    <div class="col-2 text-center bg-primary-dark-darkred">Testo</div>
    <div class="col-2 text-right bg-secondary-normale-green">Testo</div>
  </div>
  <div class="row">
    <div class="col-2 text-center bg-third-normale-purple">Testo</div>
    <div class="col-2 text-center bg-third-dark-violet">Testo</div>
  </div>
</div>