CSS활용 - SCSS를 이용한 애니메이션 만들기

SCSS를 이용하여 강아지 애니메이션 만들기

SCSS와 PUG를 이용하여 강아지 애니메이션을 만들어 보았습니다.
기존에 사용하던 HTML과 CSS와는 차이가 있었고 들여쓰기의 중요성이 커졌습니다.
CSS와 SCSS는 몇가지 차이가 있지만 그중에서 가장 큰 차이는 변수를 만들 수 있습니다.
밑에 예시에서 확인하시겠습니다.

---

CSS

SCSS로 작업했던 것들을 CSS로 컴파일하여 다시 나타냈습니다. 두가지의 차이점을 보면서 어떻게 변형되었는지 확인해보는것이 좋겠습니다.

CSS보기

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    html, body {
    background: #96FF7B;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    box-sizing: border-box;
    position: relative;
}

.dog {
    width: 100px;
    height: 100px;
    z-index: 1;
}
.dog:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.03);
    transform: translatey(-30%) scale(1.5);
}
.dog * {
    position: absolute;
}

.dog-body, .dog-head, .dog-torso {
    border-radius: 50%;
    background: white;
    position: absolute;
    width: 100%;
    height: 100%;
}

.dog-body {
    top: -50%;
    box-shadow: inset 0 -15px 0 0 #eaebec;
    animation: dog-body 200ms ease-in-out infinite alternate;
}
.dog-body:before {
    content: "";
    position: absolute;
    bottom: 90%;
    right: 50%;
    width: 90%;
    height: 90%;
    background: rgba(255, 255, 255, 0.4);
    border-top-left-radius: 100%;
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 10%;
    transform-origin: right bottom;
    animation: dog-tail-blur 200ms 33.3333333333ms ease-in-out infinite alternate both;
}
@keyframes dog-tail-blur {
    0% {
        transform: rotat(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(900deg);
    }
}

@keyframes dog-body {
    0% {
        transform: translatex(-10%);
    }
    100% {
        transform: translatex(10%);
        }
    }
.dog-head {
    animation: dog-head 600ms cubic-bezier(0.11, 0.79, 0, 0.99) infinite;
    }
    @keyframes dog-head {
    0% {
        transform: rotate(45deg);
    }
    33% {
        transform: rotate(-45deg);
    }
    66% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

.dog-torso {
        top: -20%;
        box-shadow: inset 0 -15px 0 0 #eaebec;
        background: white;
        animation: dog-torso 200ms ease-in-out infinite alternate-reverse;
}
@keyframes dog-torso {
    0% {
    transform: translatex(-5%);
    }
    100% {
        transform: translatex(5%);
    }
}

.dog-eyes {
    width: 60%;
    top: 55%;
    left: 20%;
    z-index: 1;
}
.dog-eyes:before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: orange;
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 0;
    border: 4px solid white;
    border-left-width: 0;
    border-bottom-width: 0;
    border-top-width: 0;
    transform: rotate(-45deg);
}

.dog-eye {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #000;
    z-index: 1;
}
.dog-eye:first-child {
    left: 0;
}
.dog-eye:last-child {
    right: 0;
}

.dog-muzzle {
    width: 60%;
    left: 20%;
    height: 50%;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    bottom: -15%;
    background: white;
}
.dog-muzzle:before, .dog-muzzle:after {
    content: "";
    display: block;
    position: absolute;
}
.dog-muzzle:before {
    width: 6px;
    height: 20px;
    bottom: 0;
    background: #eaebec;
    left: calc(50% - 3px);
}
.dog-muzzle:after {
    background: black;
    width: 20px;
    height: 15px;
    bottom: 12px;
    left: calc(50% - 10px);
    border-bottom-left-radius: 60% 60%;
    border-bottom-right-radius: 60% 60%;
    border-top-left-radius: 50% 40%;
    border-top-right-radius: 50% 40%;
}

.dog-ears {
    width: 40%;
    top: 25%;
    left: 30%;
}

.dog-ear {
    bottom: -10px;
    height: 50px;
    width: 50px;
    background: #eaebec;
}
.dog-ear:first-child {
    right: 100%;
    border-bottom-left-radius: 80%;
    border-top-right-radius: 80%;
    box-shadow: inset -15px 15px 0 1px white;
    transform: rotate(10deg);
}
.dog-ear:last-child {
    left: 100%;
    border-bottom-right-radius: 80%;
    border-top-left-radius: 80%;
    box-shadow: inset 15px 15px 0 0 white;
    transform: rotate(-10deg);
}

.dog-tongue {
    width: 40%;
    height: 100%;
    left: calc(50% - 20px);
    z-index: -1;
    transform-origin: center top;
}
.dog-tongue:before {
    content: "";
    position: absolute;
    display: block;
    left: 8px;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    background: #fd3163;
    animation: dog-tongue-inner 100ms ease-in-out infinite alternate;
}
@keyframes dog-tongue-inner {
    from {
        transform: translatey(5%);
    }
    to {
        transform: translatey(22%);
    }
}

.dog-tail {
    width: 22px;
    height: 24.2px;
    bottom: 40%;
    border-radius: 11px;
    transform-origin: center bottom;
    background: white;
    left: calc(50% - 11px);
}
.dog-tail .dog-tail {
    animation: dog-tail-segment 200ms ease-in-out infinite alternate;
}
@keyframes dog-tail-segment {
    0% {
        transform: rotate(-20deg);
    }
    100% {
        transform: rotate(20deg);
    }
}

.dog-body > .dog-tail {
    bottom: 90%;
}

SCSS

변수를 스타일시트 전체에서 재사용하려는 정보를 저장하는 방법으로 생각하십시오. 색상, 글꼴 스택 또는 재사용하고 싶은 CSS 값과 같은 항목을 저장할 수 있습니다. Sass는 $ 기호를 사용하여 무언가를 변수로 만듭니다.

SCSS보기

$dog-width: 100px;
$interval: 200ms;
$color-gray: #eaebec;
$easing: ease-in-out;

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

html, body {
    background: #96FF7B;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
    box-sizing: border-box;
    position: relative;
}

// dog
.dog {
    width: $dog-width;
    height: $dog-width;
    z-index: 1;
    
    &:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(black, 0.03);
    transform: translatey(-30%) scale(1.5);
    }
    
    * {
    position: absolute;
    }
}

.dog-body, .dog-head, .dog-torso {
    border-radius: 50%;
    background: white;
    position: absolute;
    width: 100%;
    height: 100%;
}

// dog-body
.dog-body {
    top: -50%;
    box-shadow: inset 0 -15px 0 0 $color-gray;
    animation: dog-body $interval $easing infinite alternate;
    
    &:before {
    content:'';
    position: absolute;
    bottom: 90%;
    right: 50%;
    width: 90%;
    height: 90%;
    background: rgba(white, 0.4);
    border-top-left-radius: 100%;
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 10%;
    transform-origin: right bottom;
    animation: dog-tail-blur $interval $interval / 6 $easing infinite alternate both;
    
    @keyframes dog-tail-blur {
        0% {
        transform: rotat(0);
        opacity: 0;
        }
        50% {
        opacity: 1;
        }
        100% {
        opacity: 0;
        transform: rotate(900deg);
        }
    }
    }
}
@keyframes dog-body {
    0% {transform: translatex(-10%)}
    100% {transform: translatex(10%)}
}

//dog-head
.dog-head {
    animation: dog-head $interval * 3 cubic-bezier(0.11, 0.79, 0, 0.99) infinite;
    @keyframes dog-head {
    0% {transform: rotate(45deg)}
    33% {transform: rotate(-45deg)}
    66% {transform: rotate(0deg)}
    100% {transform: rotate(45deg)}
    }  
}

// dog-torso
.dog-torso{
    top: -20%;
    box-shadow: inset 0 -15px 0 0 $color-gray;
    background: white;
    animation: dog-torso $interval $easing infinite alternate-reverse;
    @keyframes dog-torso {
    0% {transform: translatex(-5%);}
    100% {transform: translatex(5%);}
    }
}

//dog-eyes
.dog-eyes {
    width: 60%;
    top: 55%;
    left: 20%;
    z-index: 1;
    
    &:before {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 40px;
    background: orange;
    position: absolute;
    top: -10px;
    left: -10px;
    z-index: 0;
    border: 4px solid white;
    border-left-width: 0;
    border-bottom-width: 0;
    border-top-width: 0;
    transform: rotate(-45deg)
    }
}

.dog-eye {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #000;
    z-index: 1;
    
    &:first-child {
    left: 0;
    }
    &:last-child {
    right: 0;
    }
}
.dog-muzzle {
    width: 60%;
    left: 20%;
    height: 50%;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    bottom: -15%;
    background: white;
    
    &:before, &:after {
    content: '';
    display: block;
    position: absolute
    }
    
    &:before {
    width: 6px;
    height: 20px;
    bottom: 0;
    background: $color-gray; 
        left: calc(50% - 3px);
    }
    
    &:after {
    background: black;
    width: 20px;
    height: 15px;
    bottom: 12px;
    left: calc(50% - 10px);
    border-bottom-left-radius: 60% 60%;
    border-bottom-right-radius: 60% 60%;
    border-top-left-radius: 50% 40%;
    border-top-right-radius: 50% 40%;
    }
}

//dog-ears
.dog-ears {
    width: 40%;
    top: 25%;
    left: 30%;
}
.dog-ear{
    bottom: -10px;
    height: 50px;
    width: 50px;
    background: $color-gray;
    
    
    &:first-child {
    right: 100%;
    border-bottom-left-radius: 80%;
    border-top-right-radius: 80%;
    box-shadow: inset -15px 15px 0 1px white;
    transform: rotate(10deg);
    }
    &:last-child {
    left: 100%;
    border-bottom-right-radius: 80%;
    border-top-left-radius: 80%;
    box-shadow: inset 15px 15px 0 0 white;
    transform: rotate(-10deg);
    }
}
.dog-tongue {
    width: 40%;
    height: 100%;
    left: calc(50% - 20px);
    z-index: -1;
    transform-origin: center top;
    &:before {
    content: '';
    position: absolute;
    display: block;
    left: 8px;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    background: #fd3163;
    animation: dog-tongue-inner $interval / 2 $easing infinite alternate;
    
    @keyframes dog-tongue-inner {
        from {transform: translatey(5%)}
        to {transform: translatey(22%)}
    }
    } 
}


//dog-tail
.dog-tail {
    $tail-width: 22px;
    width: $tail-width;
    height: $tail-width * 1.1;
    bottom: 40%;
    border-radius: $tail-width / 2;
    transform-origin: center bottom;
    background: white;
    left: calc(50% - #{$tail-width / 2});
    
    .dog-tail {
    animation: dog-tail-segment $interval $easing infinite alternate;
    
    @keyframes dog-tail-segment {
        0% {transform: rotate(-20deg)}
        100% {transform: rotate(20deg)}
    }
    }
}
.dog-body > .dog-tail {
    bottom: 90%;
} 

HTML

PUG로 작업한 소스를 HTML로 컴파일하여 가져왔습니다.

html보기

<div class="dog">
    <div class="dog-body">
      <div class="dog-tail">
        <div class="dog-tail">
          <div class="dog-tail">
            <div class="dog-tail">
              <div class="dog-tail">
                <div class="dog-tail">
                  <div class="dog-tail"> 
                    <div class="dog-tail"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dog-torso"></div>
    <div class="dog-head">
      <div class="dog-ears">
        <div class="dog-ear"></div>
        <div class="dog-ear"></div>
      </div>
      <div class="dog-eyes">
        <div class="dog-eye"></div>
        <div class="dog-eye"></div>
      </div>
      <div class="dog-muzzle">
        <div class="dog-tongue"></div>
      </div>
    </div>
  </div>

PUG

PUG는 들여쓰기가 중요합니다. 태그 인식을 들여쓰기로 하기 때문입니다.

PUG보기

 .dog
    .dog-body
        .dog-tail
            .dog-tail
                .dog-tail
                    .dog-tail
                        .dog-tail
                            .dog-tail
                                .dog-tail  
                                  .dog-tail
    .dog-torso
    .dog-head
        .dog-ears
            .dog-ear
            .dog-ear
        .dog-eyes
            .dog-eye
            .dog-eye
        .dog-muzzle
            .dog-tongue