[HTML/CSS] SCSS 로 Alert 박스 만들기

💡 실습 포인트!

• % 를 이용한 임시클래스 생성 및 @extend 를 활용하여 이미 있는 클래스를 상속, 확장해보았다.
• 참고로 % 는 . 대신 사용 가능한 임시클래스로 CSS 파일에서 클래스로 컴파일하고 싶지 않을 때 사용하며, 그래서 실제로 컴파일되었을 때 @extend 받은 클래스명들로 모아서 표기됨

---

💜 Alert 박스 레이아웃

💜 HTML

    <div class="alert-box-green">
        <p>Alert Number 1!</p>
    </div>
    <div class="alert-box-blue">
        <p>Alert Number 2!</p>
    </div>
    <div class="alert-box-yellow">
        <p>Alert Number 3!</p>
    </div>

💜 SCSS

%alert-box {
  padding: 15px;
  width: 90%;
  margin: auto;
  margin-top: 15px;
  font-weight: bold;
  border-radius: 5px;
}

.alert-box-green {
  @extend %alert-box;
  border: 1.5px solid rgb(99, 236, 99);
  background: lightgreen;
  color: darkgreen;
}

.alert-box-blue {
  @extend %alert-box;
  border: 1.5px solid rgb(114, 201, 230);
  background: lightblue;
  color: darkblue;
}

.alert-box-yellow {
  @extend %alert-box;
  border: 1.5px solid rgb(241, 241, 137);
  background: lightgoldenrodyellow;
  color: darkgoldenrod;
}

•  %를 클래스명 앞에 붙이면 임시클래스가 생성된다. (클래스임을 뜻하는 마침표를 붙이지 않는 게 포인트!)
• 현재 만들고자 하는 박스는 배경색, 폰트색, 테두리만 다르므로 그것을 제외한 공통적인 속성들은 임시클래스에 담아두고 @extend 를 사용하여 상속받는다.
• 그러면 중복된 코드를 줄이고, 베이스가 되는 부분은 임시클래스에서 수정하면 된다.

💜 컴파일하여 CSS 로 변환

.alert-box-yellow, .alert-box-blue, .alert-box-green {
  padding: 15px;
  width: 90%;
  margin: auto;
  margin-top: 15px;
  font-weight: bold;
  border-radius: 5px;
}

.alert-box-green {
  border: 1.5px solid #63ec63;
  background: lightgreen;
  color: darkgreen;
}

.alert-box-blue {
  border: 1.5px solid #72c9e6;
  background: lightblue;
  color: darkblue;
}

.alert-box-yellow {
  border: 1.5px solid #f1f189;
  background: lightgoldenrodyellow;
  color: darkgoldenrod;
}/*# sourceMappingURL=alertbox.css.map */