Generated by SassMeister.com.

SassMeister-input.scss

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

$times: "imsak", "gunes", "ogle", "ikindi", "aksam", "yatsi";

$sizes:
  10 3 2 1 1 1,
  2 10 3 2 1 1,
  1 2 10 3 2 1,
  1 1 2 10 3 2,
  1 1 1 2 10 3,
  1 1 1 1 2 10;

.zaman {
  
  $k: 0;
  
  @for $i from 1 through length($times) {
    &[data-vakit="#{nth($times, $i)}"] {
      @for $j from 1 through length($times) {
        .vakit--#{nth($times, $j)} {
          flex:  #{nth(nth($sizes, $i), $j)} 0 auto;
          background-color: hsl(90 + $k, 50%, 60%);
          $k : $k + 30;
          
          @if (nth($times, $i) == nth($times, $j)) {
            cursor: default;
            
            h4{ font-size: 1.8rem; }
            
            h1{
              height: auto;
              visibility: visible;
              opacity: 1;
            }
            
          }
        }
      }
    }
  }
}

SassMeister-output.css

.zaman[data-vakit="imsak"] .vakit--imsak {
  flex: 10 0 auto;
  background-color: #99cc66;
  cursor: default;
}
.zaman[data-vakit="imsak"] .vakit--imsak h4 {
  font-size: 1.8rem;
}
.zaman[data-vakit="imsak"] .vakit--imsak h1 {
  height: auto;
  visibility: visible;
  opacity: 1;
}
.zaman[data-vakit="imsak"] .vakit--gunes {
  flex: 3 0 auto;
  background-color: #66cc66;
}
.zaman[data-vakit="imsak"] .vakit--ogle {
  flex: 2 0 auto;
  background-color: #66cc99;
}
.zaman[data-vakit="imsak"] .vakit--ikindi {
  flex: 1 0 auto;
  background-color: #66cccc;
}
.zaman[data-vakit="imsak"] .vakit--aksam {
  flex: 1 0 auto;
  background-color: #6699cc;
}
.zaman[data-vakit="imsak"] .vakit--yatsi {
  flex: 1 0 auto;
  background-color: #6666cc;
}
.zaman[data-vakit="gunes"] .vakit--imsak {
  flex: 2 0 auto;
  background-color: #9966cc;
}
.zaman[data-vakit="gunes"] .vakit--gunes {
  flex: 10 0 auto;
  background-color: #cc66cc;
  cursor: default;
}
.zaman[data-vakit="gunes"] .vakit--gunes h4 {
  font-size: 1.8rem;
}
.zaman[data-vakit="gunes"] .vakit--gunes h1 {
  height: auto;
  visibility: visible;
  opacity: 1;
}
.zaman[data-vakit="gunes"] .vakit--ogle {
  flex: 3 0 auto;
  background-color: #cc6699;
}
.zaman[data-vakit="gunes"] .vakit--ikindi {
  flex: 2 0 auto;
  background-color: #cc6666;
}
.zaman[data-vakit="gunes"] .vakit--aksam {
  flex: 1 0 auto;
  background-color: #cc9966;
}
.zaman[data-vakit="gunes"] .vakit--yatsi {
  flex: 1 0 auto;
  background-color: #cccc66;
}
.zaman[data-vakit="ogle"] .vakit--imsak {
  flex: 1 0 auto;
  background-color: #99cc66;
}
.zaman[data-vakit="ogle"] .vakit--gunes {
  flex: 2 0 auto;
  background-color: #66cc66;
}
.zaman[data-vakit="ogle"] .vakit--ogle {
  flex: 10 0 auto;
  background-color: #66cc99;
  cursor: default;
}
.zaman[data-vakit="ogle"] .vakit--ogle h4 {
  font-size: 1.8rem;
}
.zaman[data-vakit="ogle"] .vakit--ogle h1 {
  height: auto;
  visibility: visible;
  opacity: 1;
}
.zaman[data-vakit="ogle"] .vakit--ikindi {
  flex: 3 0 auto;
  background-color: #66cccc;
}
.zaman[data-vakit="ogle"] .vakit--aksam {
  flex: 2 0 auto;
  background-color: #6699cc;
}
.zaman[data-vakit="ogle"] .vakit--yatsi {
  flex: 1 0 auto;
  background-color: #6666cc;
}
.zaman[data-vakit="ikindi"] .vakit--imsak {
  flex: 1 0 auto;
  background-color: #9966cc;
}
.zaman[data-vakit="ikindi"] .vakit--gunes {
  flex: 1 0 auto;
  background-color: #cc66cc;
}
.zaman[data-vakit="ikindi"] .vakit--ogle {
  flex: 2 0 auto;
  background-color: #cc6699;
}
.zaman[data-vakit="ikindi"] .vakit--ikindi {
  flex: 10 0 auto;
  background-color: #cc6666;
  cursor: default;
}
.zaman[data-vakit="ikindi"] .vakit--ikindi h4 {
  font-size: 1.8rem;
}
.zaman[data-vakit="ikindi"] .vakit--ikindi h1 {
  height: auto;
  visibility: visible;
  opacity: 1;
}
.zaman[data-vakit="ikindi"] .vakit--aksam {
  flex: 3 0 auto;
  background-color: #cc9966;
}
.zaman[data-vakit="ikindi"] .vakit--yatsi {
  flex: 2 0 auto;
  background-color: #cccc66;
}
.zaman[data-vakit="aksam"] .vakit--imsak {
  flex: 1 0 auto;
  background-color: #99cc66;
}
.zaman[data-vakit="aksam"] .vakit--gunes {
  flex: 1 0 auto;
  background-color: #66cc66;
}
.zaman[data-vakit="aksam"] .vakit--ogle {
  flex: 1 0 auto;
  background-color: #66cc99;
}
.zaman[data-vakit="aksam"] .vakit--ikindi {
  flex: 2 0 auto;
  background-color: #66cccc;
}
.zaman[data-vakit="aksam"] .vakit--aksam {
  flex: 10 0 auto;
  background-color: #6699cc;
  cursor: default;
}
.zaman[data-vakit="aksam"] .vakit--aksam h4 {
  font-size: 1.8rem;
}
.zaman[data-vakit="aksam"] .vakit--aksam h1 {
  height: auto;
  visibility: visible;
  opacity: 1;
}
.zaman[data-vakit="aksam"] .vakit--yatsi {
  flex: 3 0 auto;
  background-color: #6666cc;
}
.zaman[data-vakit="yatsi"] .vakit--imsak {
  flex: 1 0 auto;
  background-color: #9966cc;
}
.zaman[data-vakit="yatsi"] .vakit--gunes {
  flex: 1 0 auto;
  background-color: #cc66cc;
}
.zaman[data-vakit="yatsi"] .vakit--ogle {
  flex: 1 0 auto;
  background-color: #cc6699;
}
.zaman[data-vakit="yatsi"] .vakit--ikindi {
  flex: 1 0 auto;
  background-color: #cc6666;
}
.zaman[data-vakit="yatsi"] .vakit--aksam {
  flex: 2 0 auto;
  background-color: #cc9966;
}
.zaman[data-vakit="yatsi"] .vakit--yatsi {
  flex: 10 0 auto;
  background-color: #cccc66;
  cursor: default;
}
.zaman[data-vakit="yatsi"] .vakit--yatsi h4 {
  font-size: 1.8rem;
}
.zaman[data-vakit="yatsi"] .vakit--yatsi h1 {
  height: auto;
  visibility: visible;
  opacity: 1;
}