Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

SassMeister-input.scss

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

// Sass (v3.4.4)

$container-width: 100%;
$column-count: 4;
$margin: 1%;
$first-div-animation-time:2s;
$second-div-animation-time:1s;

.container {
  width: $container-width;
}

.column {
  background: #1abc9c;
  height: 200px;
  display: block;
  float: left;
  width: ($container-width / $column-count) - ($margin * 2);
  margin: 0 $margin;
}
.column.column-1{
  transition: opacity $first-div-animation-time ease 0s;
}
.column.column-2{
  transition: opacity $second-div-animation-time ease $first-div-animation-time;
}

SassMeister-output.css

.container {
  width: 100%;
}

.column {
  background: #1abc9c;
  height: 200px;
  display: block;
  float: left;
  width: 23%;
  margin: 0 1%;
}

.column.column-1 {
  transition: opacity 2s ease 0s;
}

.column.column-2 {
  transition: opacity 1s ease 2s;
}

SassMeister-rendered.html

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>