[SASS] 공통 디자인 공유하기: @extend

 

 

@extend

: 하나의 componenet를 만들고 여러 곳에서 공유할 수 있다.

• 공통적인 디자인을 부여할 때 유용함

 

 

📌 선언하기

%변수명 {

      공통 코드

}

 

 

 

📌 사용하기

selector {

   @extend %변수명;

}

%alert {
    margin: 10px;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px dashed black;
}

.success {
    @extend %alert;
    background-color: green;
}

.error {
    @extend %alert;
    background-color: tomato
}

.warning {
    @extend %alert;
    background-color: yellow;
}

 

 

 

---

 

 

출처

노마드코더 CSS Layout 마스터클래스