SCSS: Section layouts

SCSS_Section_layouts.scss

// Sections
$sections: (
  'section-1',
  'section-2',
  'section-3',
  'section-4',
  'section-5');

// Section colors
$section-colors: (#6b9297, #f2be61, #7bc2a3, #bd8c88, #d02556);

// Sections container
.sections {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;

  // Section viewport
  .sections-viewport {
    position: absolute;
    height: 100%;
    width: 100%;
    transition: transform .5s cubic-bezier(.445, .050, .550, .950);
    backface-visibility: hidden;
    perspective: 1000px;

    // Section
    .section {
      position: absolute;
      display: flex;
      display: -ms-flex;
      display: -webkit-flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      width: 100%;
      height: 100%;
      text-align: center;
      vertical-align: middle;
      background-color: lightblue;

      // Applying default translation and bg color
      @for $i from 1 through length($sections) {
        // Get one section
        $section-one: nth($sections, $i);

        // Get one section bg color
        $section-one-color: nth($section-colors, $i);

        // Section one translation
        &.section-#{$section-one} {
          $y: 100 * ($i - 1);

          transform: translate3d(0, #{$y}#{'%'}, 0);
          background-color: $section-one-color;
        }
      }
    }

    // For translation to specific section via css
    // Eg. class="goto-SECTION-ONE"
    @for $i from 1 through length($sections) {
      $section-one: nth($sections, $i);

      // Class for translation "uncss-goto-[section-name]"
      // E.g. class="sections-viewport uncss-goto-SECTION-ONE"
      &.uncss-goto-#{$section-one} {
        $y: (100 * ($i - 1)) * (-1);
        transform: translate3d(0, #{$y}#{"%"}
        , 0);
      }
    }
  }
}