31. Converting Our CSS Code to Sass: Variables and Nesting

한 번만 명시할 속성들은 굳이 변수를 이용하지 않아도 괜찮다

bm method way

중첩하여 작성하는 방법

 

여기 부분이 .header__logo-box 와 같다고 해석된다

다른 예) 

 

이렇게 생긴 scss 파일을 정리해 봤다

$color-primary: #55c57a;
$color-primary-light: #7ed56f;
$color-primary-dark: #28b485;

$color-grey-dark: #777;
$color-white: #fff;
$color-black: #000;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Lato", "Sans-serif";
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: $color-grey-dark;
  padding: 30px;
}

.header {
  height: 95vh;
  // background-image: linear-gradient(
  //     to right bottom,
  //     rbga($color-primary, 0.8),
  //     rbga($color-primary-dark, 0.8)
  //   ),
  //   url("../img/hero.jpg");
  background-image: linear-gradient(
      to right bottom,
      rgba(126, 213, 111, 0.8),
      rgba(40, 180, 133, 0.8)
    ),
    url("../img/hero.jpg");
  background-size: cover;
  background-position: center;

  clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
  position: relative;
}

.logo-box {
  position: absolute;
  top: 50px;
  left: 40px;
}

.logo {
  height: 35px;
  backface-visibility: hidden;
}

.logo:hover {
  animation-name: moveInRight 1s ease-out;
}

.logo-box:hover .logo {
  animation: moveInLeft 1s ease-out;
  backface-visibility: hidden;
}

.text-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -40%);
  text-align: center;
}

.heading-primary {
  color: $color-white;
  text-transform: uppercase;
  margin-bottom: 60px;

  &-primary-main {
    display: block;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: 35px;

    animation-name: moveInLeft;
    animation-duration: 1s;
    animation-timing-function: ease-out;

    /* 
  animation-iteration-count: 3; 
  animation-delay: 1.5s;
  */
    /* backface-visibility: hidden; */
  }

  &-primary-sub {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 15px;
    font-size: 17.4px;

    /* animation-name: moveInRight;
  animation-duration: 1s;
  animation-timing-function: ease-in-out; */
    animation: moveInRight 1s ease-in-out;
  }
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  80% {
    transform: translateX(12px);
  }
  100% {
    /* finished */
    opaicty: 1;
    transform: translateX(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(+100px);
  }
  80% {
    transform: translateX(-12px);
  }
  100% {
    opaicty: 1;
    transform: translateX(0);
  }
}

@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(+100px);
  }
  100% {
    opaicty: 1;
    transform: translateY(0);
  }
}

.btn {
  &-animated {
    animation: moveInBottom 1s ease-out 0.75s;
    animation-fill-mode: backwards;
  }

  &:link,
  &:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding: 15px 40px;
    display: inline-block;
    border-radius: 50px;
    transition: all 0.2s;
    position: relative;
  }

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba($color-black, 0.2);

    &::after {
      transform: scaleX(1.4) scaleY(1.6);
      opacity: 0;
    }
  }

  &:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba($color-black, 0.2);
  }

  &-white {
    background-color: $color-white;
    color: $color-grey-dark;

    &::after {
      background-color: $color-white;
    }
  }

  &::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 50px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;

    transition: all 0.4s;
  }
}