SCSS Basic Rules

&이용법 

「&」를 이용하면 부모 요소의 이름을 중복해서 적을 필요가 없어진다.

.main-video {

  video {

    width: 100%;

    height: 100vh;

    object-fit: cover;

  }

  &__txt {

    font-size: 64px * 1.5;

  }

}

상기의 경우, 「&__txt」는 「.main-video__txt」를 의미한다. 

 

.gnb {

  &__list {

    display: flex;

    > li {

      &:hover {

        > a {

          color: $blue;

          &:after {

            transform: scaleX(1);

          }

        }

      }

      > a {

        display: flex;

      }

    }

  }

}

상기의 경우, 「 &__list 」는「.gnb__list 」이며, 「&:hover」는「li:hover」, 「 &:after」는「a:after」로서 기능한다.

 

 

 

 

 

중괄호 안에 스타일 속성 쓰기

span {

  font: {

    size: 18px;

    weight: 700;

  }

  margin: {

    left: 100px;

    right: 50px;

  }

}

상기 margin처럼 몇몇 스타일의 경우, 중괄호{}를 열어서 그 안에 스타일 속성을 쓸 수도 있다.