SCSS-2 상위선택자, 자식선택자

// & - 상위 선택자 참조

.btn {
    position: absolute;
    &.active {
        color: red;
    }
}

.list {
    li {
        &:last-child {
            margin-right: 0;
        }
    }
}

.fs {
    &-small { font-size: 12px; }
    &-medium { font-size: 14px; }
    &-large { font-size: 16px; }
}

// 상위 선택자 - css compile 결과

.btn {
  position: absolute;
}
.btn.active {
  color: red;
}

.list li:last-child {
  margin-right: 0;
}

.fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 14px;
}
.fs-large {
  font-size: 16px;
}

// > - 자식 선택자 참조

.container {
  ul {
    > li {
      font-size: 40px;
      .name {
        color: royalblue;
      }
      .age {
        color: orange
      }
    }
  }
}

// 자식 선택자 css compile

.container ul > li {
  font-size: 40px;
}
.container ul > li .name {
  color: royalblue;
}
.container ul > li .age {
  color: orange;
}