Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="computer">
  <div class="screen two"></div>
  <div class="screen one"></div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import "bourbon/bourbon";

.computer {
  position:relative;
  width:600px;
  height:400px;
  background-color:rgb(200,200,200);
  overflow:hidden;
  
  .screen {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    @include transition(all 0.5s ease-in-out);
    
    &.one {
      background-color:red;
    }
    
    &.two {
      background-color:green;
      @include transform(translateX(100%));
    }
  }
  
  &:hover {
    .one {
      @include transform(translateX(-100%));
    }
    .two {
      @include transform(translateX(0));
    }
  }
}

SassMeister-output.css

.computer {
  position: relative;
  width: 600px;
  height: 400px;
  background-color: #c8c8c8;
  overflow: hidden;
}

.computer .screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.computer .screen.one {
  background-color: red;
}

.computer .screen.two {
  background-color: green;
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

.computer:hover .one {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}

.computer:hover .two {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

SassMeister-rendered.html

<div class="computer">
  <div class="screen two"></div>
  <div class="screen one"></div>
</div>