SCSS 문법(1) - 주석, 중첩, 상위선택자 참조, 중첩된 속성

• 주석(Comment)
  • // (컴파일되지 않는 주석)
  • /* */ (컴파일 되는 주석)

---

• 중첩(Nestring)

// SCSS
.container {
  ul {
    li {
      font-size: 20px;
      .name {
        color: royalblue;
      }
      .age {
        color: orange;
      }
    }
  }
}

// CSS (Compiled to)
.container ul li {
  font-size: 20px;
}
.container ul li .name {
  color: #4169e1;
}
.container ul li .age {
  color: orange;
}

---

• 상위 선택자 참조(&)
  • 중첩 안에서 & 키워드는 상위 선택자를 참조하여 치환

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

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

// CSS (Compiled to)
.btn {
  position: absolute;
}
.btn.active {
  color: red;
}

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

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

// CSS (Compiled to)
.fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 14px;
}
.fs-large {
  font-size: 16px;
}

---

• 중첩된 속성
  • font-, margin-, padding- 등과 같이 동일한 네임 스페이스 가지는 속성을 : 을 사용하여 지정 가능

// SCSS
.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    bottom: 40px;
    right: 30px;
  };
}

// CSS (Compiled to)
.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-bottom: 40px;
  padding-right: 30px;
}