SASS / SCSS: colorloop

index.html

<h1 class="title">SCSS :: COLORLOOP</h1>

<ul class="boxes">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

SASS---SCSS:-colorloop.markdown

SASS / SCSS: colorloop

given a list of hex-colors this SASS code allows to color siblings while iterating through this color list

A Pen by Mario Winkler on CodePen.

License.

style.scss

$boxcolors: #FFC78B , #E6AB6B , #E6C46B , #608FA1, #6E74AE, #C3C8F8 , #BCE7F7;

@each $boxcolor in $boxcolors {
  $boxindex: index($boxcolors, $boxcolor);
  
  .boxes > li:nth-child(#{$boxindex}) {
    background-color: #{$boxcolor};
  }
}

html, body, {
  width: 100%;
  height: 100%;
  display: table;
}

.boxes {
  display: table-row;
  width: 100%;
  
  > li {
    height: 100%;
    width: 14%;
    display: table-cell;
  }
} 

.title {
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 0.51em;
  display: block;
  box-sizing: border-box;
  text-align: center;
  color: #FFF;
  font-family: 'Gotham SSm A', 'Gotham SSm B', "Lucida Grande","Lucida Sans Unicode", Tahoma, sans-serif;
  font-size: 5em;
  font-weight: bold;
}