[SCSS] scss 적용 예제

<!-- html -->
<div class="container">
    <div class="heroes">
      <div class="hero"> 
        <div class="image"></div>
      </div>
      <!-- ... 생략 -->
    </div>

    <div class="logo">
      <img src="https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images/logo_overwatch.png" alt="Overwatch">
    </div>
</div>

// scss
$url: "https://raw.githubusercontent.com/ParkYoungWoong/overwatch-hero-selector-vanilla/master/images";

body {
  height: 100vh;
  background-image: url("#{$url}/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

}
.container {
  padding: 50px 0;
  .heroes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 40px 20px;
    .hero {
      width: 80px;
      height: 84px;
      margin: 4px;
      border: 2px solid #fff;
      border-radius: 10px;
      box-sizing: border-box;
      background-color: #555;
      overflow: hidden;
      transform: skewX(-14deg);
      transition:
      transform .1s,
      background-color .6s;
      cursor: pointer;
      &:hover{
        background-color: #ff9c00;
        transform: skewX(-14deg) scale(1.3);
        z-index: 1;
      }
      .image {
        width: 140%;
        height: 100%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 90px;
        transform: skewX(14deg) translateX(-16px);
      }
      @for $i from 1 through 32 {
        &:nth-child(#{$i}) .image {
          background-image: url("#{$url}/hero#{$i}.png");
        }
      }
    }
  }
  .logo {
    max-width: 300px;
    margin: 0 auto;
    padding: 0 20px;
    img {
      width: 100%;
    }
  }
}

실행확인하기